How to use the DatePicker plugin for Jquery UI

The original link; http://www.ido321.com/375.html

The jquery UI is a very rich jquery plugin, and the various parts of the UI plug-in can be used alone, which is not the advantage of many other jquery plugins. Recently, I learned a bit about the DatePicker plugin in the UI, and this date selection/calendar display plugin is very useful. Don't say much nonsense, first take a picture, see the effect:

<span style= "FONT-SIZE:18PX;" ><! Doctype>

You can also display the text box when it gets focus, and modify it slightly:
<!--text box get focus display calendar need to import JS file--><script src= "Js/custom.min.js" ></script>
Modify the div section as follows:
Date selection: <input type= ' text ' id= ' DatePicker '/>

other unchanged, refresh the browser, effect
This is obviously not quite in line with our habits, we need to modify JS to make it conform to our usage habits
<span style= "FONT-SIZE:18PX;" ><script type= "Text/javascript" >$ ("#datepicker"). DatePicker ({showmonthafteryear:true,//year in front, Month after Yearsuffix: "Year",     //Add suffix Year prevtext: "Last month",       //mouse on the button on the turn month display text Nexttext: "Next month", monthnames:["January", "February", "March", " April "," May "," June "," July "," August "," September "," October "," November "," December ",],      //display the Month in Chinese//in Chinese display weekly (must be in this order, otherwise date error) daynamesmin:[" Day "," one "," two "," three "," four "," five "," six ",],//The format of the date displayed in the text box DateFormat:" Yy-mm-dd ",});</script></span>

the modified effect
For text boxes, the default is to show the date when the focus is taken, or you can add a button later
<span style= "FONT-SIZE:18PX;" >showon: "button",     //Add Selection button after text box </span>

You can add a picture to the button or modify the text to beautify the button
<span style= "FONT-SIZE:18PX;" >buttontext: "Date",    //Set selection button text buttonimage: "Css/images/animated-overlay.gif",//  Set picture for button </span>
If you want to display only pictures, you can add the following code
<span style= "FONT-SIZE:18PX;" >//Boolean value, whether to display the picture as a button, false to show the form of a button, true to display the picture separately, the default is Falsebuttonimageonly:true, </span>

You can also freely select the month and year
<span style= "FONT-SIZE:18PX;" >changeyear:true,  //Boolean, whether you can select the year changemonth:true,//Boolean, whether you can select the month </span>

Don't like English? OK, let's replace the numbers.
<span style= "FONT-SIZE:18PX;" >//changemonth is true, the month abbreviation monthnamesshort:["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], </span>
look at the effect
You can also set the selected year range
<span style= "FONT-SIZE:18PX;" >//when Changeyear is true, sets the year range, C represents the current year, plus minus 10 indicates that the current year is pushed back 10 and pushed for the first 10 years Yearrange: "C-10:c+10", </span>

of course, you can also add panels
<span style= "FONT-SIZE:18PX;" >showbuttonpanel:true,   //whether display panel </span>

For children who do not like English, you can change to Chinese
<span style= "FONT-SIZE:18PX;" >//the text of the current day is returned on the settings panel, only showbuttonpanel:true will be displayed Currenttext: "Today",   //The text of the panel is closed on the settings panel, only Showbuttonpanel: True  to show Closetext: "Off", </span>
These are also what we often use, if you need any function, you can modify JS. I have packaged the above code with the DatePicker from the UI and can apply it directly to your project. If you need it, you can download it from the link given below:
Fork Git: Https://github.com/dwqs/datepicker
CSDN: http://download.csdn.net/detail/u011043843/7809973
Baidu Cloud: http://pan.baidu.com/s/1bnGl07t





How to use the DatePicker plugin for Jquery UI