JQuery DatePicker Usage
The JQuery UI is powerful, and the date selector plugin DatePicker is a flexible plug-in that allows us to customize how it is presented, including date formats, languages, limit selection date ranges, add related buttons, and other navigation.
Official address: Http://docs.jquery.com/UI/Datepicker, official example: http://jqueryui.com/demos/datepicker/.
A good address for DIY JQuery UI interface effects site http://jqueryui.com/themeroller/
DatePicker basic methods of use:
<! DOCTYPE html>
<link href= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel= "stylesheet" type = "Text/css"/>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script src= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#datepicker"). DatePicker ();
});
</script>
<body style= "font-size:62.5%;" >
<div type= "text" id= "DatePicker" ></div>
</body>
Page Up/down-Last month, next month
Ctrl+page Up/down-last year, next year
Ctrl+home-the current month or the last open date
Ctrl+left/right-Last day, next day
Ctrl+up/down-Last week, next week
Enter-Determines the selected date
Ctrl+end-Close and clear the selected date
Escape-Close and cancel selection
$.datepicker.setdefaults (settings)-Global setting Date Select the parameters of the plug-in.
$.datepicker.formatdate (format, date, settings)-format the displayed date string
$.datepicker.iso8601week (date)-Give a date, indeed he is the first week of the year
$.datepicker.parsedate (format, value, settings)-Gets the date string in the specified format
D-the day ordinal of a month (no leading 0)
DD-the day ordinal of a month (two digits)
O-the day of the year (no preamble 0)
OO-the day ordinal of a year (three digits)
D-Day name Short
Dd-day name Long
M-month (no preamble 0)
MM-month (two digits)
M-month name Short
Mm-month name Long
Y-year (two digits)
YY-year (four digits)
@-Unix timestamp (starting from 01/01/1970)
' ... '-text
"-Single quote
(Other)-text
ATOM-' yy-mm-dd ' (same as RFC 3339/iso 8601)
COOKIE-' D, dd M yy '
iso_8601-' yy-mm-dd '
rfc_822-' d, D M y '
rfc_850-' DD, dd-m-y '
rfc_1036-' d, D M y
Rfc_1123-' d, D M yy '
rfc_2822-' d, D M yy '
RSS-' d, D M y '
TIMESTAMP-
"Yy-mm-dd"
Altfield:string: "
Synchronizes the selected date to another field, with Altformat to display date strings in different formats.
Initial: $ ('. Selector '). DatePicker ({altfield: ' #actualDate '});
Get: var Altfield = $ ('. Selector '). DatePicker (' option ', ' Altfield ');
Set: $ ('. Selector '). DatePicker (' option ', ' Altfield ', ' #actualDate ');
Altformat:string: "
When Altfield is set, a date format is displayed in another field.
Initial: $ ('. Selector '). DatePicker ({altformat: ' Yy-mm-dd '});
Get: var Altformat = $ ('. Selector '). DatePicker (' option ', ' Altformat ');
Set: $ ('. Selector '). DatePicker (' option ', ' Altformat ', ' yy-mm-dd ');
Appendtext:string: "
Adds the specified string after the owning domain of the date plug-in.
Initial: $ ('. Selector '). DatePicker ({appendtext: ' (YYYY-MM-DD) '});
Get: var AppendText = $ ('. Selector '). DatePicker (' option ', ' appendtext ');
Set: $ ('. Selector '). DatePicker (' option ', ' AppendText ', ' (YYYY-MM-DD) ');
Buttonimage:string: "
Sets the picture of the flyout, if not null, the text of the button becomes the Alt attribute and is not displayed directly.
Initial: $ ('. Selector '). DatePicker ({buttonimage: '/images/datepicker.gif '});
Get: var buttonimage = $ ('. Selector '). DatePicker (' option ', ' buttonimage ');
Set: $ ('. Selector '). DatePicker (' option ', ' buttonimage ', '/images/datepicker.gif ');
ButtonImageOnly:Boolean:false
Set to True to place an image after the field to use as the trigger without it appearing on a button.
Initial: $ ('. Selector '). DatePicker ({buttonimageonly:true});
Get: var buttonimageonly = $ ('. Selector '). DatePicker (' option ', ' buttonimageonly ');
Set: $ ('. Selector '). DatePicker (' option ', ' buttonimageonly ', true);
Buttontext:string: ' ... '
Sets the text content of the trigger button.
Initial: $ ('. Selector '). DatePicker ({buttontext: ' Choose '});
Get: var ButtonText = $ ('. Selector '). DatePicker (' option ', ' ButtonText ');
Set: $ ('. Selector '). DatePicker (' option ', ' ButtonText ', ' Choose ');
ChangeMonth:Boolean:false
setting allows you to select a month from the drop-down box list.
Initial: $ ('. Selector '). DatePicker ({changemonth:true});
Get: var changemonth = $ ('. Selector '). DatePicker (' option ', ' changemonth ');
Set: $ ('. Selector '). DatePicker (' option ', ' Changemonth ', true);
ChangeYear:Boolean:false
setting allows you to select the year from the drop-down box list.
Initial: $ ('. Selector '). DatePicker ({changeyear:true});
Get: var changeyear = $ ('. Selector '). DatePicker (' option ', ' changeyear ');
Set: $ ('. Selector '). DatePicker (' option ', ' changeyear ', true);
Closetexttype:stringdefault: ' Done '
Sets the text content of the Close button, which needs to be displayed by setting the Showbuttonpanel parameter.
Initial: $ ('. Selector '). DatePicker ({closetext: ' X '});
Get: var Closetext = $ ('. Selector '). DatePicker (' option ', ' closetext ');
Set: $ ('. Selector '). DatePicker (' option ', ' closetext ', ' X ');
ConstrainInput:Boolean:true
If set to true, constrains the date format that is currently entered.
Initial: $ ('. Selector '). DatePicker ({constraininput:false});
Get: var constraininput = $ ('. Selector '). DatePicker (' option ', ' constraininput ');
Set: $ ('. Selector '). DatePicker (' option ', ' Constraininput ', false);
Currenttext:string: ' Today '
Sets the text content of the button for the day, which needs to be displayed by setting the Showbuttonpanel parameter.
Initial: $ ('. Selector '). DatePicker ({currenttext: ' Now '});
Get: var Currenttext = $ ('. Selector '). DatePicker (' option ', ' currenttext ');
Set: $ ('. Selector '). DatePicker (' option ', ' currenttext ', ' now ');
Dateformat:string: ' Mm/dd/yy '
Sets the display format of the date string.
Initial: $ ('. Selector '). DatePicker ({dateformat: ' Yy-mm-dd '});
Get: var DateFormat = $ ('. Selector '). DatePicker (' option ', ' DateFormat ');
Set: $ ('. Selector '). DatePicker (' option ', ' DateFormat ', ' yy-mm-dd ');
Daynames:array: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ']
Set the name of the day of the week, starting in Sunday. This content is used when the DateFormat is displayed, and the calendar is displayed when the mouse is moved to a wardrobe.
Initial: $ ('. Selector '). DatePicker ({dayNames: [' dimanche ', ' Lundi ', ' Mardi ', ' mercredi ', ' jeudi ', ' vendredi ', ' samedi ']});
Get: var dayNames = $ ('. Selector '). DatePicker (' option ', ' dayNames ');
Set: $ ('. Selector '). DatePicker (' option ', ' dayNames ', [' dimanche ', ' Lundi ', ' Mardi ', ' mercredi ', ' jeudi ', ' vendredi ', ' Samedi ']);
Daynamesmin:array: [' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa ']
Set the daily indent for the week, starting in Sunday, when this content is displayed for DateFormat, and for the previous calendar.
Initial: $ ('. Selector '). DatePicker ({daynamesmin: [' Di ', ' Lu ', ' Ma ', ' Me ', ' Je ', ' Ve ', ' Sa ')});
Get: var daynamesmin = $ ('. Selector '). DatePicker (' option ', ' daynamesmin ');
Set: $ ('. Selector '). DatePicker (' option ', ' daynamesmin ', [' Di ', ' Lu ', ' Ma ', ' Me ', ' Je ', ' Ve ', ' Sa ');
Daynamesshort:array: [' Sun ', ' Mon ', ' Tue ', ' Wed ', ' Thu ', ' Fri ', ' Sat ']
Set the daily indent for the week, starting in Sunday, when this content is displayed for DateFormat, and for the previous calendar.
Initial: $ ('. Selector '). DatePicker ({daynamesshort: [' Dim ', ' Lun ', ' Mar ', ' Mer ', ' Jeu ', ' Ven ', ' Sam ')});
Get: var Daynamesshort = $ ('. Selector '). DatePicker (' option ', ' daynamesshort ');
Set: $ ('. Selector '). DatePicker (' option ', ' daynamesshort ', [' Dim ', ' Lun ', ' Mar ', ' Mer ', ' Jeu ', ' Ven ', ' Sam ');
Defaultdate:date, number, string:null
Sets the date that is selected when the first display is finished after the default load. Can be a Date object, either a number (starting today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').
Initial: $ ('. Selector '). DatePicker ({defaultdate: +7});
Get: var defaultdate = $ ('. Selector '). DatePicker (' option ', ' defaultdate ');
Set: $ ('. Selector '). DatePicker (' option ', ' defaultdate ', +7);
duration:string, Number: ' Normal '
Set the date control to expand the display time of the animation, optional is "slow", "normal", "fast", "" represents immediately, the number represents the number of milliseconds.
Initial: $ ('. Selector '). DatePicker ({duration: ' slow '});
Get: var duration = $ ('. Selector '). DatePicker (' option ', ' duration ');
Set: $ ('. Selector '). DatePicker (' option ', ' duration ', ' slow ');
firstday:number:0
Set the first day of the week. Sunday is 0, Monday is 1, and so on.
Initial: $ ('. Selector '). DatePicker ({firstday:1});
Get: var FirstDay = $ ('. Selector '). DatePicker (' option ', ' firstday ');
Set: $ ('. Selector '). DatePicker (' option ', ' FirstDay ', 1);
GotoCurrent:Boolean:false
If set to true, when you tap the day button, it moves to the currently selected date instead of today.
Initial: $ ('. Selector '). DatePicker ({gotocurrent:true});
Get: var gotocurrent = $ ('. Selector '). DatePicker (' option ', ' gotocurrent ');
Set: $ ('. Selector '). DatePicker (' option ', ' gotocurrent ', true);
HideIfNoPrevNext:Boolean:false
Set to hide the corresponding button when there is no previous/next selectable case. (default is not available)
Initial: $ ('. Selector '). DatePicker ({hideifnoprevnext:true});
Get: var Hideifnoprevnext = $ ('. Selector '). DatePicker (' option ', ' hideifnoprevnext ');
Set: $ ('. Selector '). DatePicker (' option ', ' Hideifnoprevnext ', true);
IsRTL:Boolean:false
If set to True, all text is from right to left.
Initial: $ ('. Selector '). DatePicker ({isrtl:true});
Get: var Isrtl = $ ('. Selector '). DatePicker (' option ', ' Isrtl ');
Set: $ ('. Selector '). DatePicker (' option ', ' Isrtl ', true);
Maxdate:date, number, string:null
Set a maximum optional date. Can be a Date object, either a number (starting today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').
Initial: $ ('. Selector '). DatePicker ({maxdate: ' +1m +1w '});
Get: var maxdate = $ ('. Selector '). DatePicker (' option ', ' maxdate ');
Set: $ ('. Selector '). DatePicker (' option ', ' maxdate ', ' +1m +1w ');
$ ('. Selector '). DatePicker (' option ', ' maxdate ', ' 12/25/2012 ');
Mindate:date, number, String:null
set a minimum optional date. Can be a Date object, either a number (starting today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').
Initial: $ ('. Selector '). DatePicker ({mindate:new Date (2007, 1-1, 1)});
Get: var mindate = $ ('. Selector '). DatePicker (' option ', ' mindate ');
Settings: $ ('. Selector '). DatePicker (' option ', ' mindate ', New Date (2007, 1-1, 1));
$ ('. Selector '). DatePicker (' option ', ' mindate ', ' 12/25/2012 ');
Monthnames:array: [' January ', ' February ', ' March ', ' April ', ' may ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ']
Sets the name of all months.
Initial: $ ('. Selector '). DatePicker ({monthnames:[' Januar ', ' februar ', ' Marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', ' August ', ' September ', ' Oktober ', ' November ', ' December ']});
Get: var monthNames = $ ('. Selector '). DatePicker (' option ', ' monthNames ');
Settings: $ ('. Selector '). DatePicker (' option ', ' monthNames ', [' Januar ', ' februar ', ' Marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', ' August ', ' September ', ' Oktober ', ' November ', ' December ']);
Monthnamesshort:array: [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' Jul ', ' April ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']
Sets the abbreviation for all months.
Initial: $ ('. Selector '). DatePicker ({monthnamesshort:[' Jan ', ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' Jul ', ' ', ' Sep ', ' Okt ', ' (' Dec ')});
Get: var Monthnamesshort = $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ');
Settings: $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ', [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' Jul ', ' April ', ' Sep ') , ' Okt ', ' Nov ', ' Dec ']);
NavigationAsDateFormat:Boolean:false
If set to True, the FormatDate function is applied to the values of Prevtext,nexttext and currenttext, for example, to display as the month name.
Initial: $ ('. Selector '). DatePicker ({navigationasdateformat:true});
Get: var Navigationasdateformat = $ ('. Selector '). DatePicker (' option ', ' Navigationasdateformat ');
Set: $ ('. Selector '). DatePicker (' option ', ' Navigationasdateformat ', true);
Nexttext:string: ' Next '
Sets the display text for the next month link.
Initial: $ ('. Selector '). DatePicker ({nexttext: ' later '});
Get: var Nexttext = $ ('. Selector '). DatePicker (' option ', ' nexttext ');
Set: $ ('. Selector '). DatePicker (' option ', ' Nexttext ', ' later ');
Numberofmonths:number, Array:1
Set how many months to display at a time. If it is an integer, the number of months is displayed, and if it is an array, the number of rows and columns that are displayed.
Initial: $ ('. Selector '). DatePicker ({numberofmonths: [2, 3]});
Get: var numberofmonths = $ ('. Selector '). DatePicker (' option ', ' numberofmonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' numberofmonths ', [2, 3]);
Prevtext:string: ' Prev '
Sets the display text for the "last month" link.
Initial: $ ('. Selector '). DatePicker ({prevtext: ' Earlier '});
Get: var Prevtext = $ ('. Selector '). DatePicker (' option ', ' prevtext ');
Set: $ ('. Selector '). DatePicker (' option ', ' prevtext ', ' Earlier ');
shortyearcutoff:string, Number: ' +10 '
Sets the value for the cutoff year. If it is (0-99), the number starts with the current year, and if it is a string, the corresponding number is converted and then added to the current year. When the cutoff year is exceeded, it is considered to be the last century.
Initial: $ ('. Selector '). DatePicker ({shortyearcutoff:50});
Get: var Shortyearcutoff = $ ('. Selector '). DatePicker (' option ', ' Shortyearcutoff ');
Set: $ ('. Selector '). DatePicker (' option ', ' Shortyearcutoff ', 50);
Showanim:string: ' Show '
Sets the name of the animation that displays and hides the date plug-in.
Initial: $ ('. Selector '). DatePicker ({showanim: ' fold '});
Get: var Showanim = $ ('. Selector '). DatePicker (' option ', ' Showanim ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showanim ', ' fold ');
ShowButtonPanel:Boolean:false
Sets whether the relevant buttons are displayed on the panel.
Initial: $ ('. Selector '). DatePicker ({showbuttonpanel:true});
Get: var Showbuttonpanel = $ ('. Selector '). DatePicker (' option ', ' Showbuttonpanel ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showbuttonpanel ', true);
showcurrentatpos:number:0
Sets the position of the current month when the multi-month display is displayed. From top/left, start at x position.
Initial: $ ('. Selector '). DatePicker ({showcurrentatpos:3});
Get: var Showcurrentatpos = $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ', 3);
ShowMonthAfterYear:Boolean:false
Whether to display the month after the head year of the panel.
Initial: $ ('. Selector '). DatePicker ({showmonthafteryear:true});
Get: var showmonthafteryear = $ ('. Selector '). DatePicker (' option ', ' showmonthafteryear ');
Set: $ ('. Selector '). DatePicker (' option ', ' showmonthafteryear ', true);
Showon:string: ' Focus '
Set what event triggers the display date plug-in panel, optional values: Focus, Button, both
Initial: $ ('. Selector '). DatePicker ({showon: ' both '});
Get: var Showon = $ ('. Selector '). DatePicker (' option ', ' Showon ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showon ', ' both ');
Showoptions:options: {}
If you use Showanim to display animation effects, you can add additional parameter settings by using this parameter.
Initial: $ ('. Selector '). DatePicker ({showoptions: {direction: ' up '});
Get: var showoptions = $ ('. Selector '). DatePicker (' option ', ' showoptions ');
Set: $ ('. Selector '). DatePicker (' option ', ' showoptions ', {direction: ' Up ');
ShowOtherMonths:Boolean:false
Whether to display the number of dates on the current panel for the top, next two months (not selectable).
Initial: $ ('. Selector '). DatePicker ({showothermonths:true});
Get: var showothermonths = $ ('. Selector '). DatePicker (' option ', ' showothermonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' showothermonths ', true);
Stepmonths:number:1
When clicked up/down January, turn a few months at a time.
Initial: $ ('. Selector '). DatePicker ({stepmonths:3});
Get: var stepmonths = $ ('. Selector '). DatePicker (' option ', ' stepmonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' stepmonths ', 3);
Yearrange:string: ' -10:+10 '
The number of years displayed in the drop-down list of the control year, either relative to the current year (-NN:+NN) or absolute (-nnnn:+nnnn)
Initial: $ ('. Selector '). DatePicker ({yearrange: ' 2000:2010 '});
Get: var Yearrange = $ ('. Selector '). DatePicker (' option ', ' yearrange ');
Set: $ ('. Selector '). DatePicker (' option ', ' yearrange ', ' 2000:2010 ');
Beforeshow:function (Input)
This event is triggered before the date control display panel, and the instance object of the control that is currently triggering the event is returned.
Initial: $ ('. Selector '). DatePicker ({beforeshow:function (input) {...}});
Beforeshowday:function (date)
This event is triggered by a date binding on each panel before the date control display panel, with the argument being the date on which the event was triggered. After the function is called, an array must be returned: [0] This date is optional (True/false), [1] The CSS style name for this date ("" means default), [2] when the mouse moves to the top, a hint appears.
Initial: $ ('. Selector '). DatePicker ({beforeshowday:function (date) {...}});
Onchangemonthyear:function (year, month, inst)
This event is triggered when the current or month is changed, and the parameter is an instance of the changed year month and the current date plug-in.
Initial: $ ('. Selector '). DatePicker ({onchangemonthyear:function (year, month, inst) {...}});
Onclose:function (Datetext, inst)
This event is triggered when the date panel is closed (regardless of whether there is a selected date), and the parameter is an instance of the selected date and current date plug-in.
Initial: $ ('. Selector '). DatePicker ({onclose:function (Datetext, inst) {...}});
Onselect:function (Datetext, inst)
When this event is triggered after a date in the date panel is selected, the parameter is an instance of the selected date and the current date plug-in.
$ ('. Selector '). DatePicker ({onselect:function (Datetext, inst) {...}});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
