JQuery UI DatePicker How to use

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:

The code is as follows:

DatePicker supports mouse click-to-date, as well as keyboard control options:

Useful features:

Date format:

Other standard date formats:

Parameter (parameter name: Parameter type: Default value)

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 date plugin's owning domain. Initial: $ ('. Selector '). DatePicker ({appendtext: ' (YYYY-MM-DD) '}); Get: var AppendText = $ ('. Selector '). DatePicker (' option ', ' appendtext '); Set: $ ('. Selector '). DatePicker (' option ', ' AppendText ', ' (YYYY-MM-DD) '); Buttonimage:string: ' Set the picture of the popup button, if it is not empty, then the text of the button becomes the Alt attribute, not directly displayed. 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 a 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 '); The ChangeMonth:Boolean:false setting allows you to select the 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); The 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, this button needs to be displayed by the Showbuttonpanel parameter's settings. 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 from 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, this content is displayed for DateFormat when used in 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 ' sets the daily indent for the week, starting in Sunday, this content is displayed for DateFormat when used in previous calendars. 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 ' sets the date control to expand the display time of the animation, optional is "slow", "normal", "fast", "" represents immediately, the numbers represent 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 1And 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 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 setting hides 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 sets a maximum optional date. Can be a Date object, or a number (from today, for example, +7), orValid strings (' Y ' represent 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, 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 '); 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: [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' Jul ', ' April ', ' Sep ', ' Oct ', ' Nov ', ' Dec ' set abbreviations 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 '); Setting: $ ('. 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 sets 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 of 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 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 ' sets what event triggers the Display date plugin panel, selectable 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 is displayed on the current panel, Number of dates for the next two months (not optional). 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: The number of years displayed in the drop-down list of the ' -10:+10 ' control year, either relative to the current year (-NN:+NN), or an absolute (-nnnn:+nnnn) initial: $ ('. Selector '). DatePicker ({yearrange: ' 2000:2010 '}); Get: var Yearrange = $ ('. Selector '). DatePicker (' option ', ' yearrange ');  Set: $ ('. Selector '). DatePicker (' option ', ' yearrange ', ' 2000:2010 ');

Event

Method:

Explanation of the usage of Jquery-ui-datepicker

1: First in the page to introduce the relevant JS, note that the introduction of the order can not 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 .... Wait for the language pack (with which to add which) Note: In the last sentence of the language pack set the DatePicker default localization similar to this sentence: SetDefaults (..... regional[...]) So the datepicker of the page if no longer set itself, the lack of capital to the last introduction of the language pack localization prevail.

2: page Example

The notes are already clear, DatePicker's official documentation for option is set to init DatePicker, then setter or getter

 JQuery UI DatePicker How to use