Jquery datepicker parameter introduction and example

Last Update:2014-04-16 Source: Internet

Author: User

Tags dateformat iso 8601 month name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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%;">

</Body>
</Html>

2. Parameters
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 ');

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 ){...}});

$. 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

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

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'

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More