jQuery date picker plug-in
A flexible unobtrusive calendar component for jQuery
Welcome to the homepage for version 2 of the jQuery datePicker plugin.
This is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Designed from
the ground up to be flexible and extensible, the date picker can be used in unlimited ways to allow you to add calendar widgets to your pages.
Requirements
- jQuery.
- The date methods.
- Optionally the bgiframe plugin (if you have SELECT elements on your page and don't want them to shine through the date pickers for users of IE).
- Optionally some localised date methods (if you want to display the date picker in a different language/ locale).
Note about using with older versions of jQuery
The datePicker is compatible with jQuery 1.1+. However, to use it with versions lower than 1.2.1 introduces a dependancy on the dimensions plugin. You will need to use a version of the dimensions plugin pre- 1.2 as in version 1.2 the offset method that we rely on was removed from the plugin (as it now exists in the core). You are always recommended to use the latest version of jQuery anyway.
Download
The latest version of the date picker will always be available through the googlecode project downloads page, alternatively you can download it below. Note that the downloads page contains the latest stable release while the subversion repository and link below will contain a newer development version.
Usage
Simply reference the relevant files at the head of your page like so:
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- required plugins -->
<script type="text/javascript" src="scripts/date.js"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
(note that I am using IE's conditional compilation to include the bgiframe plugin as it isn't necessary
for other browsers so it seems pointless for them to download it)
Then simply instantiate the date picker as you like - see the demos below for inspiration...
Documentation
The inline documentation is available as a nicely formated html
documentation file thanks to Jörn Zaefferer's
jQuery HTML Documentation Generator
Demos
A picture is worth a thousand words and so is a demo! So here are a bunch of demos showing
some of the many ways that you can use the datePicker plugin. Some of the demos are very simple
and just illustrate one optional parameter while some are more complicated and illustrate completely
different ways of using the plugin.
- simple datePicker
- A simple example showing the basic use of a date picker tied to an input field.
- simple datePicker with today selected
- A simple example showing the basic use of a date picker tied to an input field with todays date selected by default.
- simple datePicker with dates in the past selectable
- A simple example showing the basic use of a date picker tied to an input field with dates in the past selectable.
- simple datePicker with ONLY dates in the past selectable
- A simple example showing the basic use of a date picker tied to an input field with only dates in the past selectable (e.g. for entering birthdate).
- simple inline datePicker
- An example showing an inline date picker (which is always on the page and doesn't disappear).
- datePicker showing selectWeek functionality
- An example of the selectWeek functionality which is available on the date picker.
- datePicker with position
- This example shows how you can control where (relative to the associated element) the date picker appears.
- datePicker with a clickable input field
- An very simple example showing how you can make the date picker pop up when you click on the input field (rather than the associated button).
- datePicker with a different dateFormat
- A very simple example showing how you can change the date format and first day of the week displayed for the date picker.
- Localised datePicker
- A very simple example showing how you can localise the date picker.
- disabling the datePicker
- A simple example showing how you can disable a date picker.
- datePicker with custom listener
- This example shows how you can bind a date picker to any element and register a event listener which is informed whenever a date is selected.
- datePicker with a custom cell renderer
- This demo shows how you can have a date picker with a custom cell renderer to change the appearance and behaviour (in this case I make the weekends look different and be unselectable).
- datePicker with multiple months visible at once
- This shows how you can use the datePickerMultiMonth plugin to extend datePicker to show mulitple months at once.
- datePicker with multiple months visible at once hooked into a form
- This shows how you can use the datePickerMultiMonth plugin and grab it's data from a form on page load and save it to a form when it changes.
- datePicker with multiple months visible at once (popup edition)
- This shows how you can use the datePickerMultiMonth plugin to create popup date pickers which show mulitple months at once.
- datePicker with multiple select
- This shows the simple script necessary to use the date picker to be able to select multiple dates.
- datePicker with multiple select and a limit on the number of selectable dates
- Extends the previous example and shows how you can limit the amount of dates that can be selected when selectMultiple is true.
- Start and end date pickers
- This example shows how you can tie two date pickers together so that the date selected in one influences the dates that can be selected in the other.
- datePicker linked to select elements
- An example showing how you can bind a date picker to three select elements rather than to an input.
- datePicker which disappears on mouse out
- An example showing how you can make the date picker automatically close when the user moves their mouse out of it.
- Date picker that appears/ disappears on focus/ blur
- This example shows how you can make a date picker appear when it's related element is focused and then disappear when the relevant element is blurred.
- complex inline datePicker
- An example showing more advanced use of an inline date picker (with multiple instances on the same page with different settings).
- more complex inline datePicker
- An example showing inline date pickers which are linked together and trigger behaviour in each other...
- datePicker Karmas Agent example
- An example as a result of a support request from "Karmas Agent" - demonstrates custom listeners, custom date ranges and hiding dates which aren't part of the current month.
- renderCalendar
- The date picker also exposes a method for rendering a month view calendar into any element.
- renderCalendar with callbacks
- You can optionally use callbacks when rendering a calendar to control the look and behaviour of the rendered calendar.
- renderCalendar displaying bank holidays
- This example shows how you can use the renderCalendar callbacks to add extra data to the rendered calendar (in this case bank holidays are marked)
- datePicker multi-month
- [Deprecated] This shows how you can create your own datepicker which shows two consecutive months by building on top of the datePicker plugin.
Donate
My jQuery date picker is completely open source and free of charge but if you find it useful and it saves you time then please consider donating to my beer fund using the button below. Thanks!
Support
Support is available through the issues list on the jquery datepicker googlecode project - please request help or submit any bug reports there.
Credits
Thanks to John Resig and the other members of the
jQuery developement team
for an awesome library.
Further thanks to Brandon Aaron for the
bgiframe plugin and to
Brandon and Paul Bakaus for the
dimensions
plugin.
And a big thanks to Jörn Zaefferer for feedback during the planning
stage and code review. Also to Brandon Aaron and Paul McLanahan for their input.