各种jquery date picker插件示例

jQuery date picker plug-in

插段广告：我在项目中手动修改了date.js使其汉化（其实可以用下面的汉化包的），并且修改了日期显示格式为yyyy-DD-mm，这个时候，如果使用设置显示的开始日期(startDate)或者结束日期(endDate)就一定要使用这个格式的日期字符串，如$(".date-pick").dpSetStartDate("1970-01-01");，否则，设置不会起作用。

 

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$]
• 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

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.