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.
- jquery.datePicker.js [$Id: jquery.datePicker.js 84 2009-08-05 17:54:35Z kelvin.luck@gmail.com $]
- datePicker.css (the required CSS)
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