How to use Jquery ui datepicker

Its been a week since I posted, I’m slacking off since vacation days are almost over. I was just watching movies, and tegami bachi and when I got tired I watch video tutorials from lynda.com.

Well, that’s it for a quick update of my life. This time I’m going to show you how you can use the Jquery ui datepicker in case you’re having trouble making it work.

 

Things you’ll need:

Jquery core
Jquery ui

What to do:

First you have to build your folder structure. So that you won’t have any trouble linking the files that will be needed later on.
Create a folder named datepicker or anything you like. This is where we will be putting all the files which are needed in this tutorial.
This will be the structure:

image

Here’s a description for each of those folders:

  • css – this is where you will put the css file which came with the jquery ui download. The original filename of that css file will be jquery-ui-1.8.13.custom.css, just change that to jq_ui.css so that it will be easier to reference later on.
  • images – just copy and paste the image folder which came with the jquery ui download.
  • jquery_core – this is where you will put the file that you downloaded from the jquery site. Just rename the file to jq.js.
  • jquery_ui – Open up the js folder from the extracted jquery ui archive. Then copy the files , and paste it on this folder. Rename the file named jquery-1.5.1.min.js to jquimin.js
  • datepicker.php – yup, this is the file that we will be working on.

 

Hope that was clear to you. Next stop, we link the necessary files into datepicker.php:

<link rel="stylesheet" type="text/css" href="css/jq_ui.css"/>
<script type="text/javascript" src="jquery_core/jq.js"></script>
<script type="text/javascript" src="jquery_ui/jquimin.js"></script>

Then build up the function which will call up the datepicker:

<script type="text/javascript"> $(function(){ $("#datefrom").datepicker({dateFormat: 'yy-mm-dd'}); $("#dateto").datepicker({dateFormat: 'yy-mm-dd'}); $( "#datefrom" ).datepicker(); $( "#dateto" ).datepicker(); }); </script>

As you can see, you have control over the date format which will show up once you have selected the date. In the example, the output will look like this:

2011-07-01

If you’ll be storing this data on a date field on a mysql database then you don’t need to change this format anymore.
If you want to store this date with the current time. Then you can use php to do so. Just set the timezone first, and then declare a variable $time to store the current time:

date_default_timezone_set('Asia/Manila');
$time = date("g:i:s");

Later on, you can just concatenate the value of time to the value of date:

$_POST['datefrom'] . " ". $time;

It will look something like that if you plan to use $_POST to submit form values on the server. But remember to sanitize those first using mysql_real_escape_string.

 

Yeah, I almost forgot about linking the correct image path on the jquery ui css file. Open that up if you want to see the forward and backward arrows on your datepicker:

image

We will do this quick using the find and replace tool. Just press ctrl + H on your keyboard, then do what you see in the screenshot, then click on replace all:

image

Note that you can only do this if you have strictly followed my instructions. Your folder structure might be different, be sure to reference those correctly.

 

Conclusion
That’s it for this tutorial. Just consult the jquery ui page for the datepicker if you want to further customize your datepicker: http://jqueryui.com/demos/datepicker/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s