Integrating Datepicker with jQuery



Gone are the days when we have to write code, manually from scratch, to create a Website in an editor, mostly it was Notepad. Nowadays, we are using tools like Adobe Dreamweaver, Zend Studio, Microsoft Visual Studio Express and existing code libraries to simplify our work and get it done with fewer efforts in less time. Today, we will discuss about one such code library named jQuery. It is an open source, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. In this write up, we will show how you can create a Datepicker using this jQuery library. You can download the source files used in the end of the article.

Adding Default Datepicker

Step 1

Create a standard HTML file first.

Step 2

You should link the default datepicker JS and CSS files within the <head> section of your HTML file. You can download these files at the end of this article. Here is the code:

{code type=html}<link rel=”stylesheet” typePreview post=”text/css” href=”demos.css”>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui.css”>

<script src=”jquery-1.5.1.js”></script>

<script src=”jquery.ui.core.js”></script>

<script src=”jquery.ui.widget.js”></script>

<script src=”jquery.ui.datepicker.js”></script>{/code}

You can customize the demo.css file to change the layout and positioning of datepicker. In addition, you can extract the CSS code used in the HTML from it and add it within style tag for integrating the datepicker in your Website. We suggest you not play with the jquery-ui.css file as it is a member of jQuery libraries and Google AJAX APIs.

Step 3

Now, you have to add a container in the body tag to create the datepicker. Following is the code for it:

{code type=html}<div>

<p>Select the date: <input type=”text”></p>

</div>{/code}

The scripts mentioned in above JS file works automatically and adds the datepicker in the input box created. When a user clicks the box, the datepicker will appear.

Complete Code of default datepicker

{code type=html}<html>

<head>

<title>Default jQuery Datepicker</title>

<link rel=”stylesheet” type=”text/css” href=”demos.css”>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui.css”>

<script src=”jquery-1.5.1.js”></script>

<script src=”jquery.ui.core.js”></script>

<script src=”jquery.ui.widget.js”></script>

<script src=”jquery.ui.datepicker.js”></script>

<script>

$(function() {

$( “#datepicker” ).datepicker();

});

</script>

</head>

<body>

<div style=”width:500px; height:auto; font-size:small;”>

<div class=”demo”>

<p>Select the date: <input type=”text”></p>

</div>

</div>

</body>

</html>{/code}

Output

Following is a screenshot of the output:

screenshot of default jquery datepicker

Screenshot of default jQuery datepicker

Date Format Options

In the default jQuery datepicker, the date is displayed in the default format MM/DD/YYYY after selecting any date. jQuery allows you modifying the date format. Let us have a look how to customize the date format for datepicker.

Step 1

Change the default script code with this one:

{code type=javascript}<script>

$(function() {

$( “#datepicker” ).datepicker();

$( “#format” ).change(function() {

$(“#datepicker”).datepicker( “option”, “dateFormat”, $( this ).val() );

});

});

</script>{/code}

The jQuery provides following date formats:

  1. mm/dd/yy like 06/12/10
  2. yy-mm-dd like 10-06-12
  3. d M, y like 6 Jun, 10
  4. d MM, y like 6 June, 10
  5. DD, d MM, yy like Sunday, 6 June, 2010
  6. ‘day’ d ‘of’ MM ‘in the year’ yy like day 6 of June in the year 2010

Step 2

Add the follow code in the HTML below the div demo code:

{code type=html}<p>Select the format to display date:

<select>

<option value=”mm/dd/yy”>Default – mm/dd/yy</option>

<option value=”yy-mm-dd”>ISO 8601 – yy-mm-dd</option>

<option value=”d M, y”>Short – d M, y</option>

<option value=”d MM, y”>Medium – d MM, y</option>

<option value=”DD, d MM, yy”>Full – DD, d MM, yy</option>

<option value=”‘day’ d ‘of’ MM ‘in the year’ yy”>With text – ‘day’ d ‘of’ MM ‘in the ye ar’ yy</option>

</select>

</p>{/code}

screenshot of datepicker with date format options 300x71

Restricting the Date Range

You can restrict the date ranges on and specify the interval in which one can select the dates. Make use of minDate and maxDate options to set the beginning and end dates of the interval.  For example, if you are using June 6 as current date then minDate = -20D will be 20 days before June 6 and maxDate = +1M 5D will be one month 5days after June 6. The dates will be disabled before minimum date and after maximum date.

You can use following script code and change the minDate & maxDate as per your requirement.

{code type=javascript}<script>

$(function() {

$(“#datepicker”).datepicker({minDate: -40, maxDate:”+2M +5D” });

});

</script>{/code}

Output

restricting the date range in datepicker 300x112

Displaying the Inline Datepicker

Well till now we have worked to display the datepicker only when user clicks textbox. There is no scripting for this as you just have to show the datepicker div without any input box. Following is the HTML code to display inline datepicker:

Select the Date: <div></div>

inline jquery datepicker

Datepicker with Drop-down Boxes of Years & Months

To have the drop-down boxes or menus of years and months in a datepicker, you just have to add two Boolean options changeMonth & changeYear and set them to true.

{code type=html}<script>

$(function() {

$( “#datepicker” ).datepicker({

changeMonth: true,

changeYear: true

});

});

</script>{/code}

datepicker with menus of year and months

Conclusion

You can easily add a datepicker using the codes mentioned above. The datepicker is not limited to the above features only. You can also add following features to the datepicker:

●      Populating another text field on selecting a date

●      Displaying buttons on the datepicker

●      Showing dates of other months in the current month

●      Showing weeks of the year

●      Displaying multiple months

●      Adding icon trigger to launch datepicker

●      Date Range with two datepickers one for ‘from’ and another for ‘to’

Demo & Download

jQuery Datepicker Demo: Click here

Download the files: demo-jquery-datepicker.zip

The zip file will also have the code of above listed features. Please read the readme.txt for details of the contents of zip file.

Unlike MB6-202 training program, our best 70-441 tests and MB4-212 training courses provide you quick success in first try of 70-506.



Comments
  1. M S Reddy said:

    HI

    I need date picker for a div element not for input.

    How can i get date picker for div element

    please let me know

  2. Thanks for the tutorial, very clear.

    However, I don’t understand, when using the inline picker, how to handle the output for example when posting to a form.

  3. thanks a lot, very usefull for me.. i like the datepicker looks.. very clean and elegant. thank for tutorial.