jquery DatePicker Parameters Introduction and Example

jquery DatePicker Parameters Introduction and Example _jquery

Last Update:2017-01-19 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 Code code as follows:

<! 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>

</body>

2. Parameter

Copy Code code as follows:

Altfield:string: '
Synchronizes the selected dates into another domain, 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: '
The date format that is displayed in another field when Altfield is set.
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 pop-up button, if not null, the text of the button becomes the Alt property 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 is 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 months from the Drop-down 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 by Drop-down 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 that 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 day button, 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 for date strings.
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 displayed when DateFormat, and when the mouse is moved to the wardrobe in the calendar.
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 ']
Sets the daily indent for a week, starting in Sunday, when this content is displayed for DateFormat, and the wardrobe in the previous calendar is displayed.
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 ']
Sets the daily indent for a week, starting in Sunday, when this content is displayed for DateFormat, and the wardrobe in the previous calendar is displayed.
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 the first time the default load is displayed. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands 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", "the representative 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
Sets 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 the day button is clicked, it is moved 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 option. (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, or a number (from today, for example, +7), or a valid string (' Y ' stands 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
sets a minimum optional date. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands 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 ');
Set: $ ('. 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 the months.
Initial: $ ('. Selector '). DatePicker ({monthnames:[' Januar ', ' februar ', ' marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', ' August '), ' September ', ' Oktober ', ' November ', ' December ']};
Get: var monthnames = $ ('. Selector '). DatePicker (' option ', ' monthnames ');
Set: $ ('. Selector '). DatePicker (' option ', ' monthnames ', [' Januar ', ' februar ', ' marts ', ' April ', ' Maj ', ' Juni ', ' Juli ') , ' August ', ' September ', ' Oktober ', ' November ', ' December '];

Monthnamesshort:array: [' Out of the ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' o ', ' Aug ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']
Sets the abbreviation for all months.
Initial: $ ('. Selector '). DatePicker ({monthnamesshort:[' out '), ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' the ', ', ' Aug ', ' Sep ', ' Okt ', ' Nov ', ' Dec ']};
Get: var Monthnamesshort = $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ');
Set: $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ', [' the '], ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' the ', ', ' Aug ', ' Sep ' , ' Okt ', ' Nov ', ' Dec ']);

NavigationAsDateFormat:Boolean:false
If set to True, the FormatDate function will be applied to the values in Prevtext,nexttext and currenttext, such 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 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 of the cutoff year. If the number (0-99) starts with the current year, if it is a string, it is converted to a number and then added to the current year. When the cut-off 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 related 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 location where the current month is displayed when multiple months are displayed. Start x bit from top/left.
Initial: $ ('. Selector '). DatePicker ({showcurrentatpos:3});
Get: var Showcurrentatpos = $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ', 3);

ShowMonthAfterYear:Boolean:false
Whether the month is displayed 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 plugin panel, optional value: 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 some 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 the number of dates (not optional) is displayed on the current panel for the next two months.
Initial: $ ('. Selector '). DatePicker ({showothermonths:true});
Get: var showothermonths = $ ('. Selector '). DatePicker (' option ', ' showothermonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' showothermonths ', true);

Stepmonths:number:1
When clicked on/Next January, turn over a few months.
Initial: $ ('. Selector '). DatePicker ({stepmonths:3});
Get: var stepmonths = $ ('. Selector '). DatePicker (' option ', ' stepmonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' stepmonths ', 3);

Yearrange:string: ' -10:+10 '
Control the number of years displayed in the Drop-down list for the 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)
Triggers this event before the date control displays the panel, and returns the instance object of the control that is currently triggering the event.
Initial: $ ('. Selector '). DatePicker ({beforeshow:function (input) {...}});

Beforeshowday:function (date)
This event is triggered by date binding on each panel before the date control displays the panel, which is the date on which the event was triggered. After calling the function, you must return an array: [0] This date is optional (True/false), [1] The CSS style name for this date ("" is the default), [2] When the mouse is moved to the contents of the hint.
Initial: $ ('. Selector '). DatePicker ({beforeshowday:function (date) {...}});

Onchangemonthyear:function (year, month, inst)
This event is triggered when the current year or month changes, and the parameter is an instance of the changed year month and the 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 selection date), and the parameter is the selected date and the current date plug-in instance.
Initial: $ ('. Selector '). DatePicker ({onclose:function (Datetext, inst) {...}});

Onselect:function (Datetext, inst)
This event is triggered when a date is selected in the date panel, and the parameter is an instance of the plug-in for the selected date and current date.
$ ('. Selector '). DatePicker ({onselect:function (Datetext, inst) {...}});

$.datepicker.setdefaults (Settings)-Global Set Date Select the parameters for the plug-in.
$.datepicker.formatdate (format, date, settings)-formatted date string for display
$.datepicker.iso8601week (date)-Give a date, indeed he is the first few weeks of the year
$.datepicker.parsedate (format, value, settings)-Get a date string in the specified format

D-Day ordinal of each month (without leading 0)
DD-Day of the month (two digits)
O-Days of the year (without leading 0)
OO-Day of the year (three digits)
D-Day name Short
Dd-day name Long
M-month (without leading 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 quotes
(Other)-text

ATOM-' yy-mm-dd ' (Same as RFC 3339/iso 8601)
Cookies-' 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-' @ '
The consortium-' 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