Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: How To Make a jQuery Calendar

Friday, November 28, 2008

How To Make a jQuery Calendar

Whether you’re an airline, task manager, or just have a birthdate field on your registration form, a popup date picker makes selecting dates considerably easier for users, and overall enhances the functionality and feel of the site. jQuery UI provides a datepicker widget that can easily be incorporated into your site.

The Finished Datepicker Example

&amp;amp;amp;amp;amp;amp;lt;a href="http://designreviver.com/wp-content/uploads/2008/11/example.html"&amp;amp;amp;amp;amp;amp;gt;View Example&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;

Getting Started

In order to use the datepicker, we need to download it from the jQuery UI download page and link it into our page as we do with the jQuery library. 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.

Standard date picker

Customization

The real power of jQuery’s datepicker is the level of customization. We’ll go through three quick steps toward creating a datepicker that’s right for our example situation. This should give you enough examples and variations for you to choose the right parameters for your situation, too.

Styling

First up, 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, but you can of course always write your own or modify them if you don’t like them. With the first theme, the calendar looks like this:

Date picker with default style

Date Format

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, M d, yy' }); // Thurs, Jan 31, 2008

This leaves you with control over the order, separaters (slash, dash, or space), whether or not you want leading zeros on your days or months, whether you want numbers or words, and what you include or omit (year, day name, etc.).

These affect the format that the date shows up in the field after you select it:

Date picker with an alternate date format

Behavior

The last customization that we’re going to look at here is the popup behavior. By default, the event is attached to the focus of the input field that the datepicker widget is attached to. This can easily be changed so that the event is attached to either a button or an image next to the field instead.


$('#trip input#leavedate').datepicker({ showOn: 'button', buttonImage: 'calendar.gif',
buttonImageOnly: true });

This makes the calendar popup look like this:

Wrapping Everything Up

These customizations are what make the jQuery datepicker UI widget so powerful, as the widget is practical in a variety of situations. The following is the completed example using the customizations discussed above.

Departure Date: