php plug in availability

[showman13]

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

[diafol]

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

[showman13]

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

[diafol]

> 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. :)

[showman13]

> 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

[diafol]

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.

[showman13]

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>

[diafol]

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.

[showman13]

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>

[diafol]

<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.

[showman13]

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.

[showman13]

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

[showman13]

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