JQuery DatePicker Usage Detailed _jquery

The JQuery UI is powerful, where the date selector plugin DatePicker is a flexible plug-in that lets you customize its presentation, including date format, language, limit selection date range, add related buttons, and other navigation.

Official address: Http://docs.jquery.com/UI/Datepicker, official example: http://jqueryui.com/demos/datepicker/.

A nice address for DIY JQuery UI interface effect site http://jqueryui.com/themeroller/

DatePicker Basic Use Method:

<! DOCTYPE html>  

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.

Set 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 ', ' N Ovember ', ' 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 ');
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) {...}});

The above content has introduced the jquery DatePicker usage, hoped everybody likes.