Home > Developer > JavaScript
Official Address: http://docs.jquery.com/ui/datepicker,official example: http://jqueryui.com/demos/datepicker /.
A good address for DIY jQuery UI Interface Effects of site http://jqueryui.com/themeroller/
DatePicker basic usage:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body style = "font-size: 62.5%;">
<Div type = "text" id = "datepicker"> </div>
</Body>
</Html>
DatePicker allows you to select a date by clicking the date, and you can also control the selection through the keyboard:
Copy codeThe Code is as follows:
Page up/down-last month, and next month
Ctrl + page up/down-previous year and next year
Ctrl + home-current month or last opened date
Ctrl + left/right-previous day and next day
Ctrl + up/down-previous week and next week
Enter-confirm date Selection
Ctrl + end-close and clear the selected date
Escape-close and deselect
Functions:
Copy codeThe Code is as follows:
$. Datepicker. setDefaults (settings)-set the parameters of the date selection plug-in globally.
$. Datepicker. formatDate (format, date, settings)-format the displayed date string
$. Datepicker. iso8601Week (date)-returns a date, which is indeed the week of the year.
$. Datepicker. parseDate (format, value, settings)-Get the date string in the specified format
Date Format:
Copy codeThe Code is as follows:
D-the day of the month (no leading zero)
Dd-the day of the month (double digit)
O-day of the year (no leading zero)
Oo-the day of the year (three digits)
D-day name short
DD-day name long
M-month (no leading zero)
Mm-month (double digit)
M-month name short
MM-month name long
Y-year (double digit)
Yy-year (four digits)
@-Unix timestamp (starting from 01/01/1970)
'...'-Text
''-Single quotes
(Others)-Text
Other standard date formats:
Copy codeThe Code is as follows:
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 -'@'
W3C-'yy-mm-dd'
Parameter (Parameter Name: parameter type: default value)
Copy codeThe Code is as follows:
AltField: String :''
Synchronize the selected date to another domain, and use altFormat to display date strings of different formats.
Initial: $ ('. selector'). datepicker ({altField: '# actualDate '});
Get: var altField = $ ('. selector'). datepicker ('option', 'altfield ');
Settings: $ ('. selector'). datepicker ('option', 'altfield ',' # actualdate ');
AltFormat: String :''
When altField is set, the date format is displayed in another field.
Initial: $ ('. selector'). datepicker ({altFormat: 'yy-mm-dd '});
Get: var altFormat = $ ('. selector'). datepicker ('option', 'altformat ');
Settings: $ ('. selector'). datepicker ('option', 'altformat', 'yy-mm-dd ');
AppendText: String :''
Add the specified string after the domain to which the date plug-in belongs.
Initial: $ ('. selector'). datepicker ({appendText: '(yyyy-mm-dd )'});
Get: var appendText = $ ('. selector'). datepicker ('option', 'appendtext ');
Settings: $ ('. selector'). datepicker ('option', 'appendtext', '(yyyy-mm-dd )');
ButtonImage: String :''
Set the image of the pop-up button. If it is not empty, the text of the button will become the alt attribute and will not be displayed directly.
Initial: $ ('. selector'). datepicker ({buttonImage: '/images/datepicker.gif '});
Get: var buttonImage = $ ('. selector'). datepicker ('option', 'buttonimage ');
Settings: $ ('. selector'). datepicker ('option', 'buttonimag', '/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 ');
Settings: $ ('. selector'). datepicker ('option', 'buttonimageonly', true );
ButtonText: String :'...'
Set the text content of the trigger button.
Initial: $ ('. selector'). datepicker ({buttonText: 'choose '});
Get: var buttonText = $ ('. selector'). datepicker ('option', 'buttontext ');
Settings: $ ('. selector'). datepicker ('option', 'buttontext', 'choose ');
ChangeMonth: Boolean: false
Select a month from the drop-down list.
Initial: $ ('. selector'). datepicker ({changeMonth: true });
Get: var changeMonth = $ ('. selector'). datepicker ('option', 'changemonth ');
Settings: $ ('. selector'). datepicker ('option', 'changemonth', true );
ChangeYear: Boolean: false
Select a year from the drop-down list.
Initial: $ ('. selector'). datepicker ({changeYear: true });
Get: var changeYear = $ ('. selector'). datepicker ('option', 'changeyear ');
Set: $ ('. selector'). datepicker ('option', 'changeyear', true );
CloseTextType: StringDefault: 'done'
Set the text content of the close button. This button is displayed only after the showButtonPanel parameter is set.
Initial: $ ('. selector'). datepicker ({closeText: 'X '});
Get: var closeText = $ ('. selector'). datepicker ('option', 'closetext ');
Settings: $ ('. selector'). datepicker ('option', 'closetext ', 'x ');
ConstrainInput: Boolean: true
If this parameter is set to true, the input date format is restricted.
Initial: $ ('. selector'). datepicker ({constrainInput: false });
Get: var constrainInput = $ ('. selector'). datepicker ('option', 'constrainininininput ');
Settings: $ ('. selector'). datepicker ('option', 'constrainininininput', false );
CurrentText: String: 'today'
Set the text content of the button of the current day. This button must be displayed only by setting the showButtonPanel parameter.
Initial: $ ('. selector'). datepicker ({currentText: 'right '});
Get: var currentText = $ ('. selector'). datepicker ('option', 'currenttext ');
Settings: $ ('. selector'). datepicker ('option', 'currenttext', 'right ');
DateFormat: String: 'Mm/dd/yy'
Set the display format of the date string.
Initial: $ ('. selector'). datepicker ({dateFormat: 'yy-mm-dd '});
Get: var dateFormat = $ ('. selector'). datepicker ('option', 'dateformat ');
Settings: $ ('. selector'). datepicker ('option', 'dateformat', 'yy-mm-dd ');
DayNames: Array: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'Friday', 'saturday']
Set the name of each day in one week, starting from Sunday. This content is displayed when dateFormat is used, and when you move the cursor to the line header in the calendar.
Initial: $ ('. selector '). datepicker ({dayNames: ['dimanch', 'lundi ', 'Mardi', 'mercredi ', 'jeudi', 'vendredi ', 'samedi']});
Get: var dayNames = $ ('. selector'). datepicker ('option', 'daynames ');
Set: $ ('. selector '). datepicker ('option', 'daynames', ['dimanch', 'lundi ', 'Mardi', 'mercredi ', 'jeudi', 'vendredi ', 'sampled']);
DayNamesMin: Array: ['su ', 'mo', 'tu', 'we', 'th', 'Fr', 'sa ']
Set daily dashboard for one week. This content is used for dateFormat display starting from Sunday, and the line header in the previous calendar is displayed.
Initial: $ ('. selector '). datepicker ({dayNamesMin: ['di', 'lu', 'M', 'me', 'Je ', 've', 'sa']});
Get: var dayNamesMin = $ ('. selector'). datepicker ('option', 'daynamesmin ');
Set: $ ('. selector '). datepicker ('option', 'daynamesmin', ['di', 'lu', 'M', 'me', 'Je ', 've ', 'sa ']);
DayNamesShort: Array: ['sun', 'mon', 'tue ', 'wed', 'thu', 'fri', 'sat']
Set daily dashboard for one week. This content is used for dateFormat display starting from Sunday, and the line header in the previous calendar is displayed.
Initial: $ ('. selector '). datepicker ({dayNamesShort: ['dim', 'lun ', 'mar', 'M', '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
Set the date selected for the first display after the default loading. It can be a Date object, a number (from today, for example, + 7), or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 7d ').
Initial: $ ('. selector'). datepicker ({defaultDate: + 7 });
Get: var defaultDate = $ ('. selector'). datepicker ('option', 'defaultdate ');
Settings: $ ('. selector'). datepicker ('option', 'defaultdate', + 7 );
Duration: String, Number: 'normal'
Set the animation display time of the date control. Optional values: "slow", "normal", "fast", '', indicating instant, and number indicating milliseconds.
Initial: $ ('. selector'). datepicker ({duration: 'low '});
Get: var duration =$ ('. selector'). datepicker ('option', 'duration ');
Settings: $ ('. selector'). datepicker ('option', 'duration', 'low ');
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 ');
Settings: $ ('. selector'). datepicker ('option', 'firstday', 1 );
GotoCurrent: Boolean: false
If it is set to true, when you click the "Today" button, it will be moved to the selected date, instead of today.
Initial: $ ('. selector'). datepicker ({gotoCurrent: true });
Get: var gotoCurrent = $ ('. selector'). datepicker ('option', 'gotocurrent ');
Settings: $ ('. selector'). datepicker ('option', 'gostream', true );
HideIfNoPrevNext: Boolean: false
Hide the corresponding button when no previous or next option is available. (Unavailable by default)
Initial: $ ('. selector'). datepicker ({hideIfNoPrevNext: true });
Get: var hideIfNoPrevNext = $ ('. selector'). datepicker ('option', 'hideifnoprevnext ');
Set: $ ('. selector'). datepicker ('option', 'hideifnoprevnext ', true );
IsRTL: Boolean: false
If it is set to true, all text is from right to left.
Initial: $ ('. selector'). datepicker ({isRTL: true });
Get: var isRTL = $ ('. selector'). datepicker ('option', 'isrtl ');
Settings: $ ('. selector'). datepicker ('option', 'isrtl ', true );
MaxDate: Date, Number, String: null
Set the maximum optional date. It can be a Date object, a number (from today, for example, + 7), or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 7d ').
Initial: $ ('. selector'). datepicker ({maxDate: '+ 1 m + 1w '});
Obtain: var maxDate = $ ('. selector'). datepicker ('option', 'maxdate ');
Settings: $ ('. selector'). datepicker ('option', 'maxdate', '+ 1 m + 1w ');
$ ('. Selector'). datepicker ('option', 'maxdate', '2017/123 ');
MinDate: Date, Number, String: null
Set a minimum optional date. It can be a Date object, a number (from today, for example, + 7), or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 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', '2017/123 ');
MonthNames: Array: ['january ', 'february', 'march', 'clerl', 'may', 'june', 'july', 'August ', 'September ', 'October', 'november', 'december']
Set the name of all months.
Initial: $ ('. selector '). datepicker ({monthNames: ['januar ', 'februar', 'marts', 'marril', 'maj', 'juni', 'juli', 'August ', 'September ', 'oktober', 'November ', 'december']});
Get: var monthNames = $ ('. selector'). datepicker ('option', 'monthnames ');
Set: $ ('. selector '). datepicker ('option', 'monthnames', ['januar ', 'februar', 'marts', 'marril', 'maj', 'juni', 'juli ', 'August ', 'September', 'oktober ', 'November', 'december ']);
MonthNamesShort: Array: ['Jan ', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug ', 'sept', 'oct', 'nov', 'dec ']
Set the abbreviation of all months.
Initial: $ ('. selector '). datepicker ({monthNamesShort: ['Jan ', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug ', 'sept', 'okt', 'nov', 'dec ']});
Get: var monthNamesShort = $ ('. selector'). datepicker ('option', 'monthnamesshort ');
Set: $ ('. selector '). datepicker ('option', 'monthnamesshort ', ['Jan', 'feb', 'mar ', 'apr', 'maj', 'jun', 'jul ', 'aug', 'sep', 'okt', 'nov', 'dec ']);
NavigationAsDateFormat: Boolean: false
If this parameter is set to true, the formatDate function is applied to the values of prevText, nextText, and currentText, for example, the month name.
Initial: $ ('. selector'). datepicker ({navigationAsDateFormat: true });
Get: var navigationAsDateFormat = $ ('. selector'). datepicker ('option', 'navigationasdateformat ');
Set: $ ('. selector'). datepicker ('option', 'navigationasdateformat', true );
NextText: String: 'Next'
Set the display text of the "Next Month" link.
Initial: $ ('. selector'). datepicker ({nextText: 'later '});
Get: var nextText = $ ('. selector'). datepicker ('option', 'nexttext ');
Settings: $ ('. selector'). datepicker ('option', 'nexttext', 'later ');
NumberOfMonths: Number, Array: 1
Set the number of months to be displayed at a time. If the value is an integer, the number of months is displayed. If the value is an array, the number of rows and columns is displayed.
Initial: $ ('. selector'). datepicker ({numberOfMonths: [2, 3]});
Get: var numberOfMonths = $ ('. selector'). datepicker ('option', 'numberofmonths ');
Settings: $ ('. selector'). datepicker ('option', 'numberofmonths', [2, 3]);
PrevText: String: 'prev'
Set the display text of the "last month" link.
Initial: $ ('. selector'). datepicker ({prevText: 'earlier '});
Get: var prevText = $ ('. selector'). datepicker ('option', 'prevtext ');
Settings: $ ('. selector'). datepicker ('option', 'prevtext', 'earlier ');
ShortYearCutoff: String, Number: '+ 10'
Set the value of the End year. If it is a number (0-99), it starts from the current year. If it is a string, convert it to a number and then add it to the current year. When the deadline is exceeded, it is considered as the last century.
Initial: $ ('. selector'). datepicker ({shortYearCutoff: 50 });
Get: var shortYearCutoff = $ ('. selector'). datepicker ('option', 'shortyearcutoff ');
Settings: $ ('. selector'). datepicker ('option', 'shortyearcutoff ', 50 );
ShowAnim: String: 'show'
Set the name of the animation for displaying and hiding the date plug-in.
Initial: $ ('. selector'). datepicker ({showAnim: 'fold '});
Get: var showAnim = $ ('. selector'). datepicker ('option', 'showanim ');
Settings: $ ('. selector'). datepicker ('option', 'showanim ', 'fold ');
ShowButtonPanel: Boolean: false
Set whether to display related buttons on the panel.
Initial: $ ('. selector'). datepicker ({showButtonPanel: true });
Obtain: var showButtonPanel = $ ('. selector'). datepicker ('option', 'showbuttonpanel ');
Settings: $ ('. selector'). datepicker ('option', 'showbuttonpanel ', true );
ShowCurrentAtPos: Number: 0
Set the position of the current month when multiple months are displayed. X digits starting from the top/left.
Initial: $ ('. selector'). datepicker ({showCurrentAtPos: 3 });
Get: var showCurrentAtPos = $ ('. selector'). datepicker ('option', 'showcurrentatpos ');
Settings: $ ('. selector'). datepicker ('option', 'showcurrentatpos', 3 );
ShowMonthAfterYear: Boolean: false
Whether the month is displayed after the first year of the Panel.
Initial: $ ('. selector'). datepicker ({showMonthAfterYear: true });
Get: var showMonthAfterYear = $ ('. selector'). datepicker ('option', 'showmonthafteryear ');
Set: $ ('. selector'). datepicker ('option', 'showmonthafteryear', true );
ShowOn: String: 'focal'
Set the panel of the date plug-in for event triggering display. Optional values: focus, button, and both.
Initial: $ ('. selector'). datepicker ({showOn: 'both '});
Get: var showOn = $ ('. selector'). datepicker ('option', 'showon ');
Settings: $ ('. selector'). datepicker ('option', 'showon', 'both ');
ShowOptions: Options :{}
If you use showAnim to display the animation effect, you can use this parameter to add some additional parameter settings.
Initial: $ ('. selector'). datepicker ({showOptions: {ction: 'up '});
Get: var showOptions = $ ('. selector'). datepicker ('options', 'showoptions ');
Settings: $ ('. selector'). datepicker ('option', 'showoptions', {ction: 'up ');
ShowOtherMonths: Boolean: false
Indicates the number of days displayed on the current Panel or in the next two months (optional ).
Initial: $ ('. selector'). datepicker ({showOtherMonths: true });
Get: var showOtherMonths = $ ('. selector'). datepicker ('option', 'showothermonths ');
Set: $ ('. selector'). datepicker ('option', 'showothermonths', true );
StepMonths: Number: 1
When you click "TOP"/"next month, it will take several months at a time.
Initial: $ ('. selector'). datepicker ({stepMonths: 3 });
Get: var stepMonths = $ ('. selector'). datepicker ('option', 'stepmonths ');
Settings: $ ('. selector'). datepicker ('option', 'stepmonths', 3 );
YearRange: String: '-10: + 10'
The number of years displayed in the drop-down list of the control year can be relative to the current year (-nn: + nn) or absolute value (-nnnn: + nnnn)
Initial: $ ('. selector'). datepicker ({yearRange: '2014: 2000 '});
Get: var yearRange = $ ('. selector'). datepicker ('option', 'earrange ');
Settings: $ ('. selector'). datepicker ('option', 'earrange', '2014: 2000 ');
Event
Copy codeThe Code is as follows:
BeforeShow: function (input)
This event is triggered before the date control display panel, and the Instance Object of the control that currently triggers the event is returned.
Initial: $ ('. selector'). datepicker ({beforeShow: function (input ){...}});
BeforeShowDay: function (date)
Before the date control displays the Panel, this event is triggered when the date on each panel is bound. The parameter is the date on which the event is triggered. After the function is called, an array must be returned: [0] whether the date is optional (true/false), [1] The CSS style name of the date ("" indicates the default value ), [2] A prompt appears when you move the mouse over it.
Initial: $ ('. selector'). datepicker ({beforeShowDay: function (date ){...}});
OnChangeMonthYear: function (year, month, inst)
This event is triggered when the year or month changes. The parameter is the instance of the year month and current date plug-in after the change.
Initial: $ ('. selector'). datepicker ({onChangeMonthYear: function (year, month, inst ){...}});
OnClose: function (dateText, inst)
When the date panel is closed, this event is triggered (whether or not a date is selected). The parameter is the instance of the selected date and current date plug-in.
Initial: $ ('. selector'). datepicker ({onClose: function (dateText, inst ){...}});
OnSelect: function (dateText, inst)
This event is triggered when a date is selected in the date panel. The parameter is the instance of the selected date and current date plug-in.
$ ('. Selector'). datepicker ({onSelect: function (dateText, inst ){...}});
Method:
Copy codeThe Code is as follows:
Destory
Remove the drag and drop feature from the element.
Usage:. datepicker ('deststroy ')
Disable
Disable drag and drop of elements.
Usage:. datepicker ('disable ')
Enable
Enable drag and drop of elements.
Usage:. datepicker ('enable ')
Option
Obtains or sets the parameters of an element.
Usage:. datepicker ('option', optionName, [value])
Dialog
Open a date plug-in the dialog plug-in.
Usage:. datepicker ('Dialog ', dateText, [onSelect], [settings], [pos])
IsDisabled
Check whether the date plug-in is disabled.
Usage:. datepicker ('isdisabled ')
Hide
Hide (close) the date panel that has been opened before.
Usage:. datepicker ('hide ', [speed])
Show
. Datepicker ('show ')
Display date plug-in.
Usage:. datepicker ('show ')
GetDate
Returns the date selected by the current date plug-in.
Usage:. datepicker ('getdate ')
SetDate
Set the current date of the date plug-in. The date parameter can be a number (from today, for example, + 7) or a valid string ('y' indicates the year, 'M' indicates the month, and 'w' indicates the week, 'D' indicates the day, for example, '+ 1 m + 7d'), and null indicates the day.
Usage:. datepicker ('setdate', date)
Usage of jquery-ui-datepicker
1: first introduce relevant js on the page. Note that the import sequence cannot be wrong.
Jquery-1.4.2.min.js
Jquery-ui.min.js
Jquery. ui. datepicker. min. js
Jquery. ui. datepicker-zh-CN.min.js
Jquery. ui. datepicker-fr.min.js
... And so on)
Note: The default Localization of the datepicker is set in the last sentence of the Language Pack.
Like this sentence: setDefaults (... regional [...])
If the datepicker of the page is no longer set by yourself, the Localization of the last introduced Language Pack will prevail by default.
2: Page example
The annotations are clear. The official document of datepicker sets the option to init datepicker first, and then setter or getter.
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript">
$ (Function (){
// $ ("# Datepicker"). datepicker (...); // It indicates that the datepicker () is created directly with the... attribute ()
// You must init datepicker before you can set the option of datepicker.
// $ ("# Datepicker "). datepicker ('option ',...,...); // indicates the setting of datepicker... the property value is ..., but do not create datepicker ();
// $. Datepicker. setDefaults ($. datepicker. regional ['zh-cn']);
$. Datepicker. setDefaults ($. datepicker. regional ['']); // clear the regional of the Language Pack.
$ ("# Datepicker"). datepicker ();
$ ("# Datepicker"). datepicker ('option', $. datepicker. regional ['zh-cn']);
// $ ("# Datepicker "). datepicker ($. datepicker. regional ['zh-cn']); // the execution of this sentence is invalid because $ ("# datepicker") exists before "). datepicker ();
$ ("# Datepicker"). datepicker ('option', 'dateformat', 'yy-mm-dd'); // set dateFormat
// Var dateFormat = $ ("# datepicker"). datepicker ("option", "dateFormat"); // get dateFormat
// $ ("# Datepicker"). datepicker ('option', {dateFormat: 'yy-mm-dd'}); // set dateFormat
});
</Script>
</Head>
<Body>
<! -- Div id = "datepicker"> </div -->
<Input id = "datepicker" type = "text"/>
</Body>
</Html>
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
