JQuery Datepicker Tutorial

Read The Full Tutorial.

In this tutorials you will know how to create jQuery calendar, jQuery UI provides a datepicker widget that can easily be incorporated into your site.

first we need to download it from the jQuery UI download page , Applying the datepicker requires no HTML changes  and instead simply attaches itself to existing input fields. This is done with a single line of code:

$('#trip input#leavedate').datepicker();

The standard date picker that is shown is admittedly fairly ugly and impractical in both size and look.

we’re going to make the calendar popup itself a little more appealing for the sake of making more practical decisions around the actual placement of the calendar. jQuery provides a handful of CSS stylesheets to chose from

Specifying the date format is just a matter of passing a parameter to the .datepicker() initialization function. Here are some common formats:

 $('#trip input#leavedate').datepicker({ dateFormat: $.datepicker.W3C }); // 2008-01-31
 $('#trip input#leavedate').datepicker({ dateFormat: 'mm/dd/y' }); // 01/31/08
 $('#trip input#leavedate').datepicker({ dateFormat: 'm/d/yy' }); // 1/31/2008
 $('#trip input#leavedate').datepicker({ dateFormat: 'M d, yy' }); // Jan 31, 2008
 $('#trip input#leavedate').datepicker({ dateFormat: 'MM d, yy' }); // January 31, 2008
 $('#trip input#leavedate').datepicker({ dateFormat: 'D,

The last customization that we’re going to look at here is the popup behavior.

 $('#trip input#leavedate').datepicker({ showOn: 'button',

This makes the calendar popup look like this: