jQuery Date Picker

# 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

r1566 - released 23rd March 2007 [changelog]

## Example

Date 1
Date 2

## 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

- jQuery - obviously! I've tested against 1.1 [rev 1073].

## Download

- datePicker.js – compressed JS for plugin - only 5.86KB
- datePicker_source.js – the readable version of the sourcecode
- styles.css – The necessary styles

## Changelog

- 23rd March 2007 - fixed the IE7 showthrough calendar issue and updated jQuery to 1.1.2 [r1566]
- 14th February 2007 - fix so that the date picker works on XHTML pages served as application/xhtml+xml (thanks to Jason Karns) [r1342]
- 13th February 2007 - fix for issue with Firefox on Linux closing the datePicker when you clicked quickly on the previous or next buttons (thanks to Ray Lee and Ned Collyer for reporting) [r1334]
- 12th February 2007 - fix for issue with Safari not being able to move back beyod a January (thanks to Randy Phillips) [r1331]
- 2nd Febuary 2007 - fix for bug 876 (thanks to Brandon for applying the fix!) [r1255]
- 24th January 2007 - fix to allow d/mm/y (e.g. 1/Jul/2007) format dates (thanks to Guillermo Sansovic for the patch) [r1190]
- 23rd January 2007 - fix so that calls to $().datePicker are chainable (thanks to carmen) [r1175]
- 21st January 2007 - updated jQuery to 1.1 and made changes to allow plugin to function with it [r1141]
- 26th November 2006 - fix so that the weekend styling works when firstDayOfWeek != 0 (thanks to Nicko Cadell for pointing out the careless error) [r33]
- 25th November 2006 - change to add styles for weekend and weekday to the table [r32]
- 23rd November 2006 - change to allow you to click directly on the input field by passing inputClick:true when you create your datePickers (thanks to Sam Collett) [r31]
- 23rd November 2006 - changes to the code to allow different seperators to specify different date formats (many thanks to Stefan Flick) NOTE - if you are setting a date format you will need to change your calling code [r30]
- 23rd November 2006 - removed the styles to make the calendar stay above check boxes from the stylesheet and created them in the JS (to avoid validation problems with the CSS) [r29]
- 19th November 2006 - added the ability to change the first day of the week on the calendar by passing in a firstDayOfWeek parameter [r28]
- 19th November 2006 - moved the "Choose date" string out so that it could be set via setLanguageStrings [r27]
- 19th November 2006 - replaced all references to $ with references to jQuery as per best practices [r26]
- 19th November 2006 - change to remove reliance on the DOM creation plugin (thanks to Sam Collett for the relevant tweak). [r25]
- 14th November 2006 - change to make sure that the onchange event for the input is fired when a date is selected. NOTE packed version not currently available because Dean Edwards site is down... [r24]
- 8th October 2006 - moved some IE specific hackery for position from the JS into the CSS as it is presentational rather than behavioural and belongs there [r23]
- 3rd October 2006 - applied a patch from Matt Good to make the date picker work without requiring ids on the inputs (thanks Matt!) [r22]
- 3rd October 2006 - updated jQuery to r384 with fixes for (amoungst other things) possible memory leaks (didn't help much) [r22]
- 24th September 2006 - fixed a bug when in mm/dd/yyyy date format [r21]
- 11th September 2006 - fixed a nasty bug (since r12) which was messing up the days of the week in certain situations [r19]
- 10th September 2006 - updated jQuery to r249 [r18]
- 10th September 2006 - fixed a memory leak in IE/PC[r17]
- 18th August 2006 - updated jQuery to r200
- 16th August 2006 - made it possible to "reinitialise" a date picker input. This allows you to change the start and end date after the date picker has been created [r16]
- 16th August 2006 - cleaned up the initialisation method and code thanks to suggestions from the jQuery mailing list (NOTE: if you were using a previous version of the plugin you will need to update at least your initialisation code) [r15]
- 16th August 2006 - stripped more unnecessary markup from the example code [r14]
- 15th August 2006 - added the ability to "setLastDate" [r13]
- 15th August 2006 - Cleaned up the markup required to use a calendar - now it is dynamically created on init (NOTE: If you were using a previous version you will need to change your markup and CSS - see the code on this page) [r11]
- 6th August 2006 - added the ability to change the language specific strings that appear in the calendar
- 25th July 2006 - added a close button to the calendar and make it display the current year in the header (NOTE: if you were using a previous version you will likely have to also modify your stylesheet to deal with the new generated HTML) [r10]
- 24th July 2006 - updated so SELECT elements don't show through popup calendar using CSS from this fix [r9]
- 24th July 2006 - updated to work with new release of jQuery [r8]
- 20th June 2006 - clicking outside the date picker closes open calendar and escape key works consistantly [r7]
- 4th June 2006 - added the ability to specify a "first selectable date" in the past [r4]
- 3rd June 2006 - inital release [r3]

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

- jQuery
- Dean Edward's packer for compressing the code
- FamFamFam for the icon