网页中显示各国日历
jQuery Datepicker
A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges. If you find this plugin useful please vote for it on the jQuery site: (14 votes).
For date entry via a spinner use the jQuery Date Entry plugin. Complement this plugin with the jQuery Time Entry plugin.
The current version is 3.6.1. Download all the files in one go - available under the GPL and MIT licences. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations.
This plugin formed the basis for the jQuery UI Datepicker. It is made available as a separate plugin because the jQuery UI version desired simplified functionality. It was originally developed by Marc Grabanski.
Defaults
Invocation
Keyboard
Default Date
Min/Max
Formats
Day-by-day
Ranges
Multiple
Controls
Month
Miscellaneous
Events
Configuration
Localisation
Validation
Styling
In the Wild
Quick Ref
Default Settings
The datepicker functionality can easily be added as a popup to an input field, or inline to a division/span, with appropriate default settings. For an inline datepicker, use the onSelect event to be notified of a date selection.
Disable and re-enable the datepicker with a command. You can just as
easily remove the datepicker widget if it is no longer required.
Popup datepicker (input): Disable Remove
Show code
Inline datepicker (div/span):<;PrevTodayNext>;
Su Mo Tu We Th Fr Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Disable Remove
Hide code
$('#defaultInlineDatepicker').datepick();
The default settings are:
Datepicker appears on focus (popup only)
Datepicker appears below the input field (unless there is not enough
room there)
Text is in English
Date format is mm/dd/yyyy
Clear/Close controls show at the top (popup only)
Month and year are selectable directly
10 years before and after the current year are shown
Show a single month
Select a single date
Week starts on Sunday
Days in other months are not displayed
No date restrictions
Clicking elsewhere closes the date picker (popup only)
You can override the defaults globally as shown below:
$.datepick.setDefaults({showOn: 'focus'});
Processed fields are marked with a class of hasDatepick and are not
re-processed if targetted a second time.
Usage
Include the jQuery library in the head section of your page.
<;script type=";text/javascript";
src=";;;>;<;/script>;
Download and include the jQuery Datepicker CSS and the jQuery Datepicker Javascript in the head section of your page.
<;style type=";text/css";>;@import
";jquery.datepick.css";;<;/style>;
<;script type=";text/javascript";
src=";jquery.datepick.js";>;<;/script>;
Alternately, you can use the packed version jquery.datepick.pack.js (28.6K vs 86.5K), or the minified version jquery.datepick.min.js (39.0K, 11.4K when zipped).
Connect the datepicker functionality to your input fields or divisions.
$(selector).datepick();
You can include custom settings as part of this process.
$(selector).datepick({dateFormat: 'dd/mm/yy'});
For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations.
Localisations
Localisation packages are available for download and should be loaded after the main datepicker code. These packages automatically apply their settings as global default values.
Albanian (Gjuha shqipe) - jquery.datepick-sq.js (thanks to Flakron Bytyqi)
Arabic (???????) - jquery.datepick-ar.js (thanks to Khaled Al Horani)
Armenian (???????) - jquery.datepick-hy.js (thanks to Levon Zakaryan)
Azerbaijani (Az?rbaycan dili) - jquery.datepick-az.js (thanks to Jamil Najafov)
Bulgarian (?Ò?ì?Ý?Ô?Ñ?â?ã?Ü?Ú ?Ö?Ù?Ú?Ü) - jquery.datepick-bg.js (thanks to Stoyan Kyosev)
Catalan (Català) - jquery.datepick-ca.js (thanks to Joan Leon)
Chinese Simplified (?òÌåÖÐÎÄ) - jquery.datepick-zh-CN.js (thanks to Cloudream)
Chinese Traditional (??ówÖÐÎÄ) - jquery.datepick-zh-TW.js (thanks to Ressol)
Croatian (Hrvatski jezik) - jquery.datepick-hr.js (thanks to Vjekoslav Nesek)
Czech (?e?tina) - jquery.datepick-cs.js (thanks to Tomas Muller)
Danish (Dansk) - jquery.datepick-da.js (thanks to Jan Christensen)
Dutch (Nederlands) - jquery.datepick-nl.js (thanks to Mathias Bynens)
Esperanto - jquery.datepick-eo.js (thanks to Olivier M.)
Estonian (eesti keel) - jquery.datepick-et.js (thanks to Mart Sõmermaa)
Farsi/Persian (?????) - jquery.datepick-fa.js (thanks to Javad Mowlanezhad)
Finnish (suomi) - jquery.datepick-fi.js (thanks to Harri Kilpiö)
French (Français) - jquery.datepick-fr.js (thanks to Stéphane Nahmani)
German (Deutsch) - jquery.datepick-de.js (thanks to Milian Wolff)
Greek (???Ë?Ë?Ç?Í?É?Ê?) - jquery.datepick-el.js (thanks to Alex Cicovic)
Hebrew (?????) - jquery.datepick-he.js (thanks to Amir Hardon)
Hungarian (Magyar) - jquery.datepick-hu.js (thanks to Istvan Karaszi)
Icelandic (Íslenska) - jquery.datepick-is.js (thanks to Haukur H. Thorsson)
Indonesian (Bahasa Indonesia) - jquery.datepick-id.js (thanks to Deden Fathurahman)
Italian (Italiano) - jquery.datepick-it.js (thanks to Apaella)
Japanese (ÈÕ??ÕZ) - jquery.datepick-ja.js (thanks to Kentaro SATO)
Korean (???) - jquery.datepick-ko.js (thanks to DaeKwon Kang)
Latvian (Latvie?u Valoda) - jquery.datepick-lv.js (thanks to Arturas Paleicikas)
Lithuanian (lietuvi? kalba) - jquery.datepick-lt.js (thanks to Arturas Paleicikas)
Malaysian (Bahasa Malaysia) - jquery.datepick-ms.js (thanks to Mohd Nawawi Mohamad Jamili)
Norwegian (Norsk) - jquery.datepick-no.js (thanks to Naimdjon Takhirov)
Polish (Polski) - jquery.datepick-pl.js (thanks to Jacek Wysocki)
Portuguese/Brazilian (Português) - jquery.datepick-pt-BR.js (thanks to Leonildo Costa Silva)
Romanian (Român?) - jquery.datepick-ro.js (thanks to Edmond L.)
Russian (???å?ã?ã?Ü?Ú?Û) - jquery.datepick-ru.js (thanks to Andrew Stromnov)
Serbian (?ã?â?á?ã?Ü?Ú ??Ö?Ù?Ú?Ü) - jquery.datepick-sr.js (thanks to Dejan Dimi?)
Serbian (srpski jezik) - jquery.datepick-sr-SR.js (thanks to Dejan Dimi?)
Slovak (Sloven?ina) - jquery.datepick-sk.js (thanks to Vojtech Rinik)
Slovenian (Slovenski Jezik) - jquery.datepick-sl.js (thanks to Jaka Jan?ar)
Spanish (Español) - jquery.datepick-es.js (thanks to Vester)
Swedish (Svenska) - jquery.datepick-sv.js (thanks to Anders Ekdahl)
Thai (???????) - jquery.datepick-th.js (thanks to pipo)
Turkish (Türkçe) - jquery.datepick-ar.js (thanks to Izzet Emre Erkan)
Ukranian (?µ?Ü?â?Ñ??ß?ã?î?Ü?Ñ) - jquery.datepick-uk.js (thanks to Maxim Drogobitskiy)
Other translations are welcomed.
Comments
Just wanted to thank you for the fantastic Datepicker plug-in.
Josh Berman
I came across your date picker online. I have to say it is way nicer than anything else I've seen online.
Efrain Carballo
Your datepicker tool has worked flawlessly in my application.
Mike Longo
I wanted to thank you for this great plug in, it's full of features, very easy to use.
Ishai Hachlili
I just wanted to let you know that your datepicker is by far the best one out there I've found to date.
Marshall Stevenson
Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.
Change History
Version Date Changes
3.6.1 30 May 2009
Corrected error in onChangeMonthYear when using the drop-downs
Corrected error in display of month/year drop-downs when selecting a range
Corrected error in minimised and packed versions
3.6.0 02 May 2009
Added multiSelect and multiSeparator settings to select multiple unrelated dates
Added showDefault setting
Manual entry updates calendar and alternate field
Validation now validates the individual field rather than the whole form
Allowed override of validation messages
Added Azerbaijani and Estonian localisations
3.5.2 04 Apr 2009
Setting of dates now respects any minimum/maximum settings and updating
minimum/maximum settings restricts selected date
Corrected cross-talk when enabling/disabling/destroying sibling datepickers
'option' command now retrieves instance settings when given a name but no value
Added Windows ticks format: '!'
Corrected parsing of short years and a shortYearCutoff of -1 disables adjusting years less than 100
Updated validation for date ranges to check start is not after end
Callbacks onHover, onChangeMonthYear, onSelect, and onClose now return date(s) as a string and Date object(s)
Moved showMonthAfterYear to localisation settings
Added yearSuffix to localisation settings
Added Serbian (Cyrillic and Latin) localisations
3.5.1 24 Jan 2009
Added validation plugin support
Corrected external click check
Corrected display error in IE6
Corrected positioning in IE
Added Greek localisation
3.5.0 10 Jan 2009
Separated from jQuery UI as that version desired simplified functionality
changeFirstDay now defaults to false
Added selectOtherMonths to allow selection of days from other months
Added onHover event
Added Malaysian localisation
Added several alternate stylesheets