The DatePicker () method in the JQuery UI

Source: Internet
Author: User
Tags dateformat

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.