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.
Usage

Simply reference the relevant files at the head of your page like so:

  <!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <!-- required plugins --> <script src="scripts/date.js" type="text/javascript"></script>
<!--[if IE]><mce :script type="text/javascript" mce_src="scripts/jquery.bgiframe.js"></mce>< ![endif]--> <!-- jquery.datePicker.js --> <script src="scripts/jquery.datePicker.js" type="text/javascript"></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

Simple Date Picker Example:
The example displays simple use of the datePicker component to select a date for input fields.
Page sourcecode

$(function()
{
	$('.date-pick').datePicker();
});

CSS:

/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}

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 (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.

Download: http://jquery-datepicker.googlecode.com/files/jquery.datePicker-2.1.2.js
Source:http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

Related Listings:

1. TimePicker Script with jQuery Plugin A time picker for jQuery. list version | table version....
2. DatePicker v4 Ajax Script My 3rd and final attempt writing a datePicker (calendar) that...
3. Sliding Date Picker Due to the development of Qash.nl, a Dutch personal finance...
4. JQuery Calendar Hot Script The jQuery Datepicker project has been donated to the jQuery...
5. Date input Calendar Jason’s Date Input Calendar is designed specifically to make entering...

Do you like this post?

Email: