The DatePicker use method in jQueryUI is 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.

Before doing a scheduling attendance system, with time to deal with more, the time control to do some contrast, feel jqueryui in this datepicker more practical, the following to draw some time for everyone to organize, convenient to consult later, but also hope to help everyone!

1, introduce JS,CSS

<link rel= "stylesheet" href= "Http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" > 
< Script src= "Http://code.jquery.com/jquery-1.9.1.js" ></script>
<script src= "http:// Code.jquery.com/ui/1.10.4/jquery-ui.js "></script>

This is probably not much to say, DatePicker is based on jQueryUI control, and the use of jQueryUI must first introduce jquery.js

2, Configuration Properties

In the first contact with this plugin, I am also a variety of online search materials, but find most of the miscellaneous, a variety of properties of the overall orderly and disorderly list to pick out the focus. In fact, we do not need so much of a day-to-day use, in order to quickly see and use, I here directly in the method body enumerated the most used several properties:

<input id= "Testdatepicker" class= test-datepicker "placeholder=" Please select the date ... " /> 
<script type= "Text/javascript" >
$ ("#testDatepicker"). DatePicker ({
showanim: ' Slidedown ', Show defaults, Slidedown sliding down, fadeIn fading, blind blinds, bounce bounce, Clip clips, drop landings, fold folding, slide sliding
mindate: -1,//minimum date, can be a Date object, or a number (from 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 ').
maxdate: +17,//maximum date, ditto
defaultdate: +4,//default date, ditto
Duration: ' Fast ',//animation display time, optional is "slow", "normal", "fast "," the representative immediately, the number represents the number of milliseconds
firstday:1,//Set the first day of the week. Default Sunday 0, Monday is 1, and so on.
nexttext: ' next month ',//Set the display text for the "Next" link. When you put the mouse on the
prevtext: ' Last month ',//Set the display text of the "last" link.
showbuttonpanel:true,//whether to display the button panel 
currenttext: ' Today ',//Set the text content of the day button, this button needs to be displayed by setting the Showbuttonpanel parameter.
gotocurrent:false,//If set to True, clicking the Day button moves to the currently selected date instead of today.
}); 
</script>

3, Common events

DatePicker provides related events, in the actual development of the most commonly used is nothing more than these three, open before Beforeshow, closed Onclose,onselect selected, we can print the relevant parameters through the console to debug the specific how to use, This will enhance the awareness of plug-ins:

$ ("#testDatepicker"). DatePicker ({
onselect:function (datetext, inst) {//Check event
console.log ("Onselect, Datetext ", datetext);
Console.log ("Onselect, Inst", inst);
}, Beforeshow:function (
input) {//Date control display panel before
console.log (" Beforeshow, input ", input);
},
onclose:function (Datetext, inst) {//When the date panel is closed, this event is triggered (regardless of a selection date)
Console.log ("OnClose, Datetext", datetext);
Console.log ("OnClose, Inst", inst);
}
);

Here is a onselect event, in general our actual project will be two date selection box, such as a start date, an end date. So we're definitely going to do it. The start date must be less than the end date checksum, and we can do the input control by changing the maximum/small date of another date box by Onselect event, as shown in the figure:

Html:

<input class= "Ipt-datepicker" type= "text" id= "Schduledatestart" Scheduling start date ... "placeholder=" name= " >
<input class= "Ipt-datepicker" type= "text" id= "schduledateend" placeholder= "Scheduling End date ..." Name= " Schduledateend ">

Js:

$ ("#schduleDateStart"). DatePicker ({
onselect:function (datetext,inst) {
$ ("#schduleDateEnd"). DatePicker ( "Option", "MinDate", Datetext);
}
);
$ ("#schduleDateEnd"). DatePicker ({
onselect:function (datetext,inst) {
$ ("#schduleDateStart"). DatePicker ("option", "MaxDate", Datetext);
}
);

Note: When we bind the Onselect event, the text box will be invalidated, or overwritten, by the original Change event, and then move the action code to the Onselect event's callback function.

4, Chinese:

So far, we can basically use this control in the actual project. But unfortunately, this control is developed by foreigners, so the bottom is definitely English, so the user experience is certainly not good, so we need to introduce a zh-cn.js to the control of the Chinese. The code is very simple, of course, like Pervtext,nexttext These we can also make relevant changes according to their own needs:

/* Chinese initialisation for the jQuery UI date picker plugin. * *
jQuery (function ($) {
$.datepicker.regional[' zh-cn '] = {
closetext: ' Close ',
prevtext: ' < last month ',
nexttext: ' Next month > ',
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 '],
dateformat: ' Yy-mm-dd ', firstday:1,
isrtl:false};
$.datepicker.setdefaults ($.datepicker.regional[' zh-cn ');
});

5, Control effect diagram:

The above is a small set to introduce the jQueryUI in the DatePicker use method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!