jQuery date picker plugin

A jQuery plugin to allow you to add "date picker" elements to your forms.

The "date pickers" allow you to pick a date by clicking on a calendar and puts the chosen date into the relevant text input

No validation is performed on the text input when the form is submitted and it is presumed that the server processing the form is expecting dates in the format you specify.

Version

r1672 - released 12th April 2007 [changelog]

Example


Usage

Optionally set the date format (possible values are 'dmy' (european), 'mdy' (americian) or 'ymd' (unicode)) [defaults to 'dmy'] and seperator (any character) [defaults to '/']:

$.datePicker.setDateFormat('dmy','/'); // default - UK style
$.datePicker.setDateFormat('ymd','-'); // unicode
$.datePicker.setDateFormat('dmy','.'); // german

And optionally change the displayed language [default strings are in English]:

$.datePicker.setLanguageStrings(
	['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
	['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
	{p:'Anterior', n:'Siguiente', c:'Cierre', b:'Elija la fecha'}
);

Then you are ready to initialise your date pickers. The basic syntax for this is as follows:

$('selector').datePicker();

This will add a date picker button to any input element matched by the query selector and the date picker will allow you to select any future date.

You can also optionally pass a start date (the first selectable date) or end date (the last selectable date) to the plugin like so:

$('selector').datePicker({startDate:'05/03/2006', endDate:'05/11/2006'});

You can additionally pass a value for the first day of the week on the calendars (from 0 for Sunday to 6 for Saturday)

$('selector').datePicker({firstDayOfWeek:1}); // set the calendar weeks to start from Mondays

Please view the sourcecode of this page for further examples of using the plugin. You can download this page if you like and experiment with commenting out different lines...

NOTE: A user without JavaScript will simply see normal input boxes.

Requirements

Download

Changelog

This plugin is stored in a Subversion repository. If you want to access old versions or do diffs of the changes between versions please use your subversion client to access the jquery subversion repository at svn://jquery.com/trunk/plugins/datePicker/

Feedback

Feedback is greatly appreciated, either via the comments on the bottom of this page on my site, the jQuery mailing list or my contact form.

Credits