1,105,534 Community Members

php plug in availability

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

Good Sunday Afternoon...

Is there anybody here that knows of a piece of code that would be available to just plug into a script that would allow the selection of a date range for a reporting feature?

Just something that would say From this date To this date...

And possibly have an icon that would display a calendar to choose from?

I just need something that I can paste into a script and capture the two dates output to use for search function.

Any suggestions would be greatly appreciated.

Thanks
Douglas

Member Avatar
diafol
Where are my eyes?
13,003 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,850 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
1
 

jquery calendar: http://jqueryui.com/demos/datepicker/#date-range
any js range calendar

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

jquery calendar: http://jqueryui.com/demos/datepicker/#date-range
any js range calendar

Thanks for the response...

By the looks of it, this will most likely be everything I need and more.

Problem might be that it is so complicated that I won't have time to learn enough to implement it where(when) it is needed.

But it does look like an awesome set of widgets... Will keep it on file at least for when I have more time to learn it for future purposes.

Thanks again,

Douglas

Member Avatar
diafol
Where are my eyes?
13,003 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,850 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

> Problem might be that it is so complicated that I won't have time to learn enough to implement it where(when) it is needed.

The whole point of it is that it's NOT complicated. jQuery certainly makes using js a lot easier. You just link to the jquery.js and jqueryui.js files and copy the js and html from the jqueryui example page. That's it, you're done. :)

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

> Problem might be that it is so complicated that I won't have time to learn enough to implement it where(when) it is needed.

The whole point of it is that it's NOT complicated. jQuery certainly makes using js a lot easier. You just link to the jquery.js and jqueryui.js files and copy the js and html from the jqueryui example page. That's it, you're done. :)

OK, well thanks again...

Maybe I missed something in the explanation.

It looked to me like I needed to download and install alot of jquery files on my server, and then the configuration of the calendar looked like it entailed alot of settings...

Maybe I'm just overthinking it.

When you say 'link to the jquery.js and jqueryui.js files' are you referring to linking to them on their server, or uploading them from my own server?

I really feel dumb when it comes to this, because I don't use js at all, so know very little if anything about it.

Thanks again,

Douglas

Member Avatar
diafol
Where are my eyes?
13,003 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,850 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

Don't feel dumb - if you have no experience of it, you can't be expected to get it straight away. Anyway -

I tend to use the Google CDN for linking to jquery from here:

http://code.google.com/apis/libraries/devguide.html#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

I tend to download jqueryui and put it on the server. Easy enough - choose your theme and unzip to a folder of your choice - rename the folder though to something simple like 'jui'. I also rename the jqueryui.js file itself as this tends to have the version number in it - probably not the wisest thing to do, but I'm a cack-monkey-handed typer and always mistype the dots and numbers! :)

BTW - use the minified js file (...min.js) - it's faster.

Then lets say your file is: /jui/jqueryui.min.js, just palce another script tag UNDER the jquery one:

<script src="jui/jqueryui.min.js"></script>

You should now be all set up once you link in the CSS files. I tend to maove all the css and image files to my main css folder. Again I rename the jqueryui*.css file to jui.css for ease.

<!--your own custom css file if you have one -->
<link href="css/main.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" /> 
<!--the moved and renamed jqueryui css file-->
<link href="css/jui.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />

So now, you should have:

<link href="css/main.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" /> 
<!--the moved and renamed jqueryui css file-->
<link href="css/jui.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jui/jqueryui.min.js"></script>

Then follow the instructions for use. If you need the date range:

Go to the http://jqueryui.com/demos/datepicker/#date-range page and click on the 'view source' link. Copy the code and paste the script into the head area (below the jqueryui.js - or whatever you called it - script tag) and the form into the body area. Should be good to go.

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

Then follow the instructions for use. If you need the date range:

Go to the http://jqueryui.com/demos/datepicker/#date-range page and click on the 'view source' link. Copy the code and paste the script into the head area (below the jqueryui.js - or whatever you called it - script tag) and the form into the body area. Should be good to go.

Well, I tried to do exactly what you laid out and couldn't make it work, so I started doing more reading and tested a few variations and am still not able to get it to work.

I know I'm missing something simple, but don't know what it is.

I get the display of the from and to form entries, but that is all.

Any help or direction you could offer would be greatly appreciated.

I created a folder called jui and put everything in there ( and yes - uploaded it)
jquery.ui.core.min.js
jquery.ui.datepicker.min.js
jqueryui.min.js
jui.css


Here is the view source of the webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../all_inc/gen_css.css" />
    <meta http-equiv="Content-Language" content="en-us">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Mobius Loop</title>
    <link href="jui/jui.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jui/jqueryui.min.js"></script>
    <script src="jui/jquery.ui.core.js"></script>
    <script src="jui/jquery.ui.datepicker.js"></script>
    <script>
	$(function() {
		var dates = $( "#from, #to" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				var option = this.id == "from" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});
	});
	</script>
</head>
<!-- ADMIN pgtop -->

<body>
<table align="center" width="100%" height="350" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" valign="top" width="150" background="../images/150X2Clear.png">
    &nbsp;
    </td>
    <td align="center" valign="top">
        <table align="center" width="730" height="200" cellpadding="3" cellspacing="0">
          <tr>
            <td align="right" background="../images/MobiusHeaderLogoBar730pxl11082011.png" width="730" height="190" valign="middle"><i><b><font size="+2" color="#003300">Admin&nbsp;&nbsp;&nbsp;&nbsp;<br>Back Office&nbsp;&nbsp;&nbsp;&nbsp;</font></b></i>

            </td>
          </tr>
        </table>
    </td>
    <td align="center" valign="middle" width="150" background="../images/150X2Clear.png">
    &nbsp;
    </td>
  </tr>

  <tr>
    <td align="center" valign="top" width="150" background="../images/150X2Clear.png">
    &nbsp;
    </td>
    <td align="center" valign="middle" width="730">


<table width="730" height="350" align="center">
  <tr>
    <td align="center" valign="top">

        <div class="demo">
            <label for="from">From</label>
            <input type="text" id="from" name="from"/>
            <label for="to">to</label>
            <input type="text" id="to" name="to"/>

        </div><!-- End demo -->

        <div class="demo-description">

            <p>Select the date range to search for.</p>
        </div><!-- End demo-description -->

    </td>
  </tr>
</table>




    </td>

    <td align="left" valign="top" width="150"><img src="images/150X2Clear.png">
    &nbsp;
    </td>
  </tr>
  <tr>
    <td align="center" colspan="3" background="../images/green_bottom.png" valign="bottom" width="100%" height="200">
        <p class="Ctiny"><br />Copyright (c) 2011 - Mobius Loop - All Rights Reserved</p>
    </td>

  </tr>
</table> 
</body>
</html>
Member Avatar
diafol
Where are my eyes?
13,003 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,850 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

you don't need to reference core and datepicker.

Also check the css file for the location of the image files. They should be relative references to the css file., e.g.

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url([B]images/ui-bg_highlight-soft_100_eeeeee_1x100.png[/B]) 50% top repeat-x; color: #333333; }

Search for image in your text editor and change the urls as required.

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

you don't need to reference core and datepicker.

Also check the css file for the location of the image files. They should be relative references to the css file., e.g.

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url([B]images/ui-bg_highlight-soft_100_eeeeee_1x100.png[/B]) 50% top repeat-x; color: #333333; }

Search for image in your text editor and change the urls as required.

Thanks again for your continued responses.

I decided to go step by step with their instructions for selecting the widget and let it determine what the dependencies were, etc, and downloaded the zip as they created it...

Then I uploaded to a fresh directory and created a single page including what they indicated was necessary, and got the same results...

I didn't move anything from where they said it should be.

http://www.thedreamrelease.com/a_test/sample.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/sunny/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

		<script type="text/javascript">
 	<script>
	$(function() {
		var dates = $( "#from, #to" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				var option = this.id == "from" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});
	});
	</script>

</head>

<body>

Hello, World!<div class="demo">

<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>

</div><!-- End demo -->



<div class="demo-description">
<p>Select the date range to search for.</p>
</div><!-- End demo-description -->
</body>

</html>
Member Avatar
diafol
Where are my eyes?
13,003 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,850 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 
<script type="text/javascript">
 	<script>
	$(function() {
		var dates = $( "#from, #to" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				var option = this.id == "from" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});
	});
	</script>

Get rid of that extra open script tag - no need for it - it's stopping code execution.

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

Get rid of that extra open script tag - no need for it - it's stopping code execution.

Amazing how well things work when you do them the way they are supposed to be...

Now all I need to do is capture the two dates that are entered, and I'll be off to the races...

thanks for all your help

I'm going to mark this as solved.

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

Now all I need to do is capture the two dates that are entered, and I'll be off to the races...

ARDAV,

By chance could you give me a clue as to how I would capture the values in the from and to date fields using java script?

I thought that maybe they would be captured like in an html form through php, but found that wasn't the case.


How do I capture them in php variables that can be used going forward in the script?

Thanks in advance for your response.

Douglas

Member Avatar
showman13
Posting Pro in Training
416 posts since Feb 2010
Reputation Points: 22 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 2 [?]
 
0
 

ARDAV,

By chance could you give me a clue as to how I would capture the values in the from and to date fields using java script?

I thought that maybe they would be captured like in an html form through php, but found that wasn't the case.


How do I capture them in php variables that can be used going forward in the script?

Thanks in advance for your response.

Douglas

I found the answer... Just had to wrap it in a form.... DUH.

Thanks Again.

Douglas

Question Answered as of 2 Years Ago by diafol
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article