20151221jquery Learning Notes---Calendar UI

Sister's, these days really no language, participated in a boring game, it is a waste of time, a few days did not learn jquery Ah, today learned a little, but the final exam, estimated to save the winter vacation ah.

Calendar (DatePicker) UI that allows users to enter dates more intuitively and easily, and also consider not
Language restrictions in the same country, including Chinese.
A Call the DatePicker () method

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

Two Modify the DatePicker () style
The header background of the Calendar UI and the dialog UI background use the same class, so
Be modified. So there's no need to change it here.

Instead of modifying the CSS in the UI, replace it directly with Style.css. Ui-widget-header {background:url (. /img/ui_header_bg.png);} Modify the style of today's date. Ui-datepicker-today. ui-state-highlight {border:1px solid #eee; color: #f60;} Modifies the style of the selected date. Ui-datepicker-current-day. ui-state-active {border:1px solid #eee; color: #06f;

Three Properties of the DatePicker () method
There are two forms of the Calendar method: 1.datepicker (Options), which are passed in the form of object key-value pairs, each
A key-value pair represents an option, 2.datepicker (' action ', param), and the action is a string that operates on the method of the dialog box, param

Note: By default, the calendar is displayed in English. If you want to use the Chinese calendar, simply introduce the Chinese language pack
Can Or the Chinese language pack of several lines of code to integrate into a JS file can be.

$ (' #date '). DatePicker ({dateformat: ' Yy-mm-dd ', dayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '), Daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '],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 '],altfield: ' #abc ', Altformat: ' Yy-mm-dd ', AppendText: ' (YY-MM-DD) ', Firstday:1,showweek: True,weekheader: ' Week ',});

　　

$ (' #date '). DatePicker ({disabled:true,numberofmonths: [3,2],showothermonths:true,selectothermonths:true, Changemonth:true,changeyear:true,isrtl:true,autosize:true,showbuttonpanel:true,closetext: ' Off ', CurrentText: ' Today ', Showmonthafteryear:true,});

　　

$ (' #date '). DatePicker ({yearrange: ' 1950:2020 ', mindate: -10000,maxdate:0,//can be used with the new date (2007,1,1) Defaultdate:-1,//Available To use ' 1m+3 ' hideifnoprevnext:true,gotocurrent:false,});

　　

$ (' #date '). DatePicker ({yearrange: ' 1950:2020 ', showanim:false,duration:300,});

　　

Four Events for the DatePicker () method
In addition to property settings, the DatePicker () method provides a number of events. These events can be given to a variety of different states
The callback function is provided. The This value in these callback functions equals the Div object of the dialog box content, not the entire dialog box.
Div.

$ (' #date '). DatePicker ({beforeshow:function () {alert (' Calendar display before triggering! },beforeshowday:function (date) {if (date.getdate () = = 1) {return [False, ' a ', ' cannot select '];} else {return [True];}},onchang Emonthyear:function (year,month,inst) {alert (year),},onclose:function (datetext,inst) {alert (datetext);},onselect: function (datetext,inst) {alert (datetext);}});

Note: The JQuery UI only allows the use of events defined in the options. It is not currently possible to try the on () method to manage.

Displays the calendar $ (' #date '). DatePicker (' show ');//Hide Calendar $ (' #date '). DatePicker (' hide ');//Gets the currently selected date alert ($ (' #date '). DatePicker ( ' GetDate ').//Set the currently selected date $ (' #date '). DatePicker (' setDate ', ' 2/15/2014 ');//delete the calendar $ (' #date '). DatePicker (' Destroy ');//Gets the calendar of JQuery objects $ (' #date '). DatePicker (' widget ');//Refresh Calendar $ (' #date '). DatePicker (' refresh ');// Gets whether the calendar alert ($ (' #date ') is disabled. DatePicker (' isdisabled '));//Gets the value of the property alert ($ (' #date '). DatePicker (' option ', ' disabled '); /Set the value of the property $ (' #date '). DatePicker (' option ', ' disabled ', true);

　　

These tutorials are designed to make it easier for you to read and copy others ....

20151221jquery Learning Notes---Calendar UI