21个免费的JavaScript优秀日期选择器

1. The JQuery UI Datepicker is an excellent script that supports multiple themes and can be used in specific formats. Here are some examples:

- date range restriction
- alternate field population
- display month and year menus
- display button bar
- display multiple months
- show datepicker when clicking a date icon

[Go to Project Page | View Demo]

2. jQuery Datepicker is a plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting dates. It’s a simplified version of the JQuery UI Datepicker.

Features include:

* works as a popup for an input field or inline in a div/span
* full keyboard equivalents
* Predefined date formats are available. You can even define your own format.
* Minimum/Maximum date restriction
* Update an alternate field with the date in a different format
* Select a range of dates
* Show week of the year / days from other months
* Callbacks on hover, change of month/year, selection and closure
* CSS Customizable
* Language selector

[Go to Project Page | View Demo]

3. The JQuery Date Picker Plugin is a flexible and unobtrusive calendar component. It allows you to easily add date inputting functionality to your web forms and pages. This script, as the previous mentioned one, can work in many ways. Here are some examples:

- simple datePicker with today selected
- simple datePicker with dates in the past selectable
- simple datePicker with ONLY dates in the past selectable
- datePicker with multiple months visible at once
- datePicker with multiple select
- renderCalendar with callbacks

[Go to Project Page | View Demo]

4. Date Picker is a JQuery Plugin with a lot of features and easy to implement in your web applications:

* Flat Mode – as element in page
* Multiple calendars
* Single, multiple or range selection
* Dates can be marked as special, weekends, special days
* The look can be easily customizable through CSS
* Localization for months’ and days’ names
* Custom day to start the week
* Fits into the viewport

[Go to Project Page | View Demo]

5. jQuery Date Input is a small, fast and pretty date picker .

Features include:

* CSS customization
* Language selector
* Specify the first day of the week
* Date formatting

[Go to Project Page | View Demo]

6. JQuery Date Picker is a nice script that uses clean and extensible code.

Features include:

* Ability to type or pick a date from the calendar
* The validation for the keyboard entered dates is presented unobtrusively and inline
* Very easy setup

License: GPL

[Go to Project Page | View Demo]

7. JCalendar is a JQuery script made by Ted Serbinski which works as an inline dynamic calendar.

Features:

* Fully themable through CSS
* Today’s date is selected as default if no other values are supplied
* The boundaries of the calendar are automatically set (eg: next/prev) based on first and last years specified in the ‘Select year’ form element.
* Using the TAB button you can select dates and browser calendar
* ‘Today’, ‘Prev’ & ‘Next’ links
* It works with JQuery 1.0.4 or 1.1.2

[Go to Project Page | View Demo]

8. The Unobtrusive Date-Picker Widget V4 is an excellent script which is accessible using the keyboard, requires no embedded JavaScript blocks, requires no pop-up windows and is suitable for use in within documents served as application/xhtml+xml.

Features:

* full keyboard accessible
* Support for multiple date formats and date dividers
* nameSpace friendly and unobtrusive
* Customizable via CSS
* Upper and lower dates limits can be set
* Certain days of the week can be disable
* “Smart” localization
* Bespoke days of the week can be highlighted
* It is free to use, even commercially, being released under a CC share-alike license

[Go to Project Page | View Demo]

9. Fancy Mootools Date Picker is a nice script that can be customized using CSS.

Features:

* The number of characters for the day names abbreviation can be specified
* The total number of days can be set for each month
* The date format is editable (default value used: ‘mm/dd/yyyy’). A regular expression is used to replace the value with a date
* You can specify the first day of the week (1 – Monday, 7 – Sunday)
* Year Range is supported (from start year + number of years to add)
* The order of the years from the dropdown can be either ascendant (‘asc’) or descendant (‘desc’) – from start year to end year or reverse.

[Go to Project Page | View Demo]

10. Calendar is a JavaScript class written for MooTools that adds accessible and unobtrusive date pickers to your form elements.

Features:
* Style-able and semantic XHTML
* Highly configurable use of inputs and selects
* Variable navigation options
* Future / past calendar restrictions (and more)
* Multi-calendar support (with padding)
* Multi-lingual and fancy date formatting

[Go to Project Page | View Demo]

11. The Vista-like Ajax Calendar (vlaCalendar) version 2 that uses the well-known library framework MooTools is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar.

Features include:
* Authentic Vista Look and Feel
* CSS Customizable
* Easily changeable date labels
* Easily stylable
* Both normal and datepicker calendar can be instantiated multiple times
* Lightweight

[Go to Project Page | View Demo]

12. The DatePickerControl v1.1.6 transforms your input text control into a date-picker control.

Features include:

* Automatic input control conversion by setting a single attribute in the ‘input’ tag, or using a special ‘id’ attribute.
* Multiple date formats
* Layered calendar (no annoying pop-up windows)
* Navigation through mouse and keyboard
* First day of week can be defined
* Day Limits (Min and Max)
* CSS Support
* LGPL License

[Go to Project Page | View Demo]

13. jsCalendar is a nice DHTML Date Picker that is easy to setup (in either flat or pop-up mode) and it’s compatible with most popular browsers, being created using web standards.

Features include:
* Multiple date formats are supported
* Keyboard navigation
* Fast setup
* Select multiple dates
* Highlight special dates

[Go to Project Page | View Demo]

14. Yahoo! UI Library: Calendar is a UI control that enables users to choose one or more dates from a graphical calendar presented in a single or a multi month interface.

Some important features:
* multi-select calendar
* multi-page calendar
* Minimum/Maximum Dates
* Calendar navigator
* CSS Customizable

[Go to Project Page | View Demo]

15. Jason Moon’s Calendar Script is a date picker simple and easy to integrate in the pages of your website that supports multiple date formats and works in most modern browsers.

Features include:
* the look of the calendar can be easily changed by editing the calendarDateInput.js file: font, size and style; background color; cell dimensions; top row background color; highlighted day background color
* multiple date pickers can be used in a single page
* specify number of seconds until the calendar disappears

[Go to Project Page | View Demo]

16. JavaScript Calendar Script/Date Picker Widget is a simple & unobtrusive script from OpenJS.

Features:
* Simple
* Multiple calendars can be added on the same page
* Self Contained (it doesn’t require an external library)
* Unobtrusive
* CSS Customizable

[Go to Project Page | View Demo]

17. dhtmlxCalendar is a lightweight cross-browser JavaScript calendar which can be configured either as a popup date picker or a flat calendar. It’s a fully customizable and easy to use script.

Features include:
* JavaScript API Full Control
* Select between a range of dates
* Inactive dates (User is unable to select inactive date)
* Double calendar
* Easy connection to the text field
* Multi language support – Language and settings can be switched on the fly
* Custom holidays can be set

[Go to Project Page | View Demo]

18. Simple Calendar Widget is a flexible, simple and fully commented calendar script that works across most modern browsers.

Features include:
* Customizable for date format, colors, language and year range
* A date is accepted as an input
* The first day of the week can be chosen for the display
* Specific dates can be disabled
* Week numbering
* Dynamic language selection
* Draggable (optionally)

[Go to Project Page | View Demo]

19. Rich Calendar is a cross-browser JavaScript datepicker script that implements the appropriate functionality with many advanced options widely extending fields of its applications.

Features include:
* No Window Pop-Ups
* Skinnable – CSS Customizable
* Multilingual
* Language dependent date formats
* Multiple calendars in a single page
* Positioning can be relative or absolute
* User-defined behavior

[Go to Project Page | View Demo]

20. jsDatePick is a nice date picker that uses DOM techniques to generate its HTML code.

Features include:
* Appear as a popup for an input field or inline in a DIV / SPAN
* Limit the possible picking days to today’s date
* Swap the colors of the date’s cells from a wide range of colors
* Set the limits for the years enabled in the calendar

[View Demo | Download]

21. Xin Calendar Mods is a collection of the core scripts (calendars from Xin Calendar) and their mod scripts.

Features include:
* In-Page and Pop-up calendar
* Advanced Date range
* Long date formats supported
* Two Digit Years
* Calendar Title (in your own format)
* Month/Year List
* Date Link
* Journal
* Date Tips
* Special Days

[Go to Project Page | View Demo]