The DatePicker () method in the JQuery UI

Learning Essentials:

1. Call the DatePicker () method
2. Modify the DatePicker () style
3. Properties of the DatePicker () method
4. Events for the DatePicker () method

First, call the DatePicker () method

$ (' #date '). DatePicker ();

Second, modify the DatePicker () styleModify the style, you can review the elements in the browser, and then modify the style of the corresponding place //Modify the style of today's date

. ui-datepicker-today. ui-state-highlight{     border:1px solid #eee;     Color: #f60;}

 

//Modify the style of the selected date

. ui-datepicker-current-day. ui-state-active{     border:1px solid #eee;     Color: #06f;}

Iii. Properties of the DatePicker () methodThere are two forms of the Calendar method: 1, DatePicker (options), options are parameters in the form of object key-value pairs, each key-value pair represents an option, 2, DatePicker (' Aciton ', param), action Is the string that operates the dialog method, and Param is an option for options.

//Set Date format

$ (' #date '). DatePicker ({    dateformat: ' Yy-mm-dd '});

//Specify the minimum format for the day of the week

$ (' #date '). DatePicker ({     daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' Six '],});

//Long format for the specified month

$ (' #date '). DatePicker ({     monthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ')     });

//Specify input field

<type= "Test"  ID= "abc"/>  $ (' #date '). DatePicker ({     altfield: ' #abc '})  

//Optional date format added to the input field

<type= "Test"  ID= "abc"/>  $ (' # Date '). DatePicker ({     altfield: ' #abc ',     altformat: ' Yy/mm/dd '})

//Append text after input field

$ (' #date '). DatePicker ({     appendtext: ' Calendar '})

DatePicker appearance options:

//Display multiple calendars

$ (' #date '). DatePicker ({     numberofmonth:3,     //A row of 3     numberofmonth: [3,2],//three rows per row of 2    });   

//Fills cells that are not displayed, but cannot be used

$ (' #date '). DatePicker ({     showothermonths:true,});

//Select last month or next month's date, provided that Showothermonths is set to True

$ (' #date '). DatePicker ({     showothermonths:true,     selectothermonths:true,})   

//Display a drop-down list of quick select months

$ (' #date '). DatePicker ({     changemonth:true,     monthnamesshort: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' Borlnd ', ' October ', ' November ', ' December ')  //And let the month appear in Chinese })

//Show drop-down list of quick select year

$ (' #date '). DatePicker ({     changeyear:true})

//Trigger mode

$ (' #date '). DatePicker ({     showon: ' button '     //click button})

//Optional Maximum date

$ (' #date '). DatePicker ({     maxdate:0  //0 days of the current date, that's the Day   })

Hide button If last month and next month are not present

$ (' #date '). DatePicker ({     maxdate:0  //0 days after the current date, which is the day     hideifnoprevnext:true   })

// Optional minimum date

$ (' #date '). DatePicker ({     maxdate:0  //0 days after the current date, that is, the day     mindate:-5//5 days before the current date     Hideifnoprevnext: True   })

//Birthday selection, just match maxdate and Yearrange

$ (' #date '). DatePicker ({     maxdate:0  //0 days after the current date, that is, the day     hideifnoprevnext:true,     // MaxDate and MinDate only limit the date, and the year limit does not have another high yearrange for the priority     : ' 1950:2020 '}

Iv. Events for the DatePicker () methodIn addition to property settings, the DatePicker () method provides a number of events. These events can provide a callback function for a variety of different states. The This value in these callback functions equals the Div object of the dialog box content, not the entire dialog box Div. //Disable number 1th per month

$ (' #date '). DatePicker ({     beforeshowday:function (date) {         if (date.getdate () = = 1) {              return [false, ' Class name ', ' cannot choose # 1th ');          } else{             return [true];}}      )

Note: The JQuery UI only allows the use of events defined in the options. The On () method is not currently available for administration.(usually used when the internal write is initialized, when the external write is to make some changes)

//Get the currently selected date

Alert ($ (' #date '). DatePicker (' getDate '));     Gets the currently selected date alert ($ (' #date '). DatePicker (' GetDate '). getFullYear ());     Gets the year of the currently selected date

 

//Set the current selected date

$ (' #date '). DatePicker (' getDate ', ' 2013-02-01 ')

"* Chinese *"Note: By default, the calendar is displayed in English. If you want to use the Chinese calendar, the Chinese language pack can be introduced directly. Or the Chinese language pack of several lines of code to integrate into a JS file can be. Reference: http://www.ycku.com/jquery-44/

JQuery (function ($) {  $.datepicker.regional[' zh-cn ') = {      closetext: ' Off ',      prevtext: ' & #x3c; Last month ',      Nexttext: ' next month & #x3e; ',      currenttext: ' Today ',      monthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August '        , ' September ', ' October ', ' November ', ' December ',      monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' five ', ' Six ',        ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 '],      DayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday '      , ' Friday ', ' Saturday '],      daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '],      weekheader: ' Week ',      dateformat: ' Yy-mm-dd ',      Firstday:1,      Isrtl:false,      showmonthafteryear:true,      yearsuffix: ' Year '};  $.datepicker.setdefaults ($.datepicker.regional[' ZH-CN ');});

The DatePicker () method in the JQuery UI