jquery UI DatePicker Time Control Usage (enhanced version) _jquery

Let's look at the property sheet for the DatePicker plug-in:

Use instance of the first calendar plug-in
First import the required class library files:

<</span>scripttype= "Text/javascript" src= "${pagecontext.request.contextpath}/js/jquery-1.7.1.min.js" ></</SPAN>script>
<</span>scripttype= "Text/javascript" src= "${ PageContext.request.contextPath}/js/jquery.ui.datepicker-zh-cn.js "></</SPAN>script>
< </span>scripttype= "Text/javascript" src= "${pagecontext.request.contextpath}/js/ Jquery-ui-1.8.18.custom.min.js "></</SPAN>script>
<</span>linkrel=" stylesheet "type= "Text/css" href= "${pagecontext.request.contextpath}/css/ui-lightness/jquery-ui-1.8.18.custom.css" >

Write the page code first:

<</span>div class= "Demo" >
<</span>p>date:<</span>input type= "text" id= " DatePicker "></</SPAN>p>
</</SPAN>div>

Then use the JS code to invoke the plug-in

Screenshot of Effect:

The following examples verify some common properties:
1. Altfield: Use the alternate output field, the date to be selected in another format, output to another control, the value is a selector, that is, the control to output
Format of Altformat:altfield output
Instance validation:
Page code:

<</span>div class= "Demo" >
<</span>p>date: <</span>input type= "text" id= " DatePicker ">
<</span>input type=" text id= "alternate" size= "
/></</span>p>" </</SPAN>div>

JS Code:

$ (function () {
$ ("#datepicker"). DatePicker ({
Altfield: "#alternate",
altformat: "DD, D MM, yy"
});
});

Screenshot of Effect:

2, Showanim: Set the date panel display or hidden animation name
The writing of JS code:

$ (function () {
$ ("#datepicker"). DatePicker ();
$ ("#anim"). Change (function () {
$ (' #datepicker '). DatePicker ("option", "Showanim", $ (this). Val ());
});
});

3, Showbuttonpanel: whether to display the button panel
JS Code:
[JavaScript] View plaincopyprint?
$ ("#datepicker"). DatePicker ({
Showbuttonpanel:true
});

As shown below the Panel has two buttons: click "Today" will jump to today's date, click "Off" will close the panel.

4, DateFormat: Specify the format of the display date
JS Code:

$ ("#datepicker"). DatePicker ({
dateformat: "Yy/mm/dd"
});

Screenshot of Effect:

You can see from the image that the date format in the text box has changed from the previous "Yy-mm-dd" to "BY/MM/DD". Of course, there are other formats, can be set according to their preferences.
5, Changemonth: whether to use the Drop-down list to select the month
Changeyear: Use the Drop-down list to select the year
Add this property to the JS code: changemonth:true or Changeyear:true
The month or year of the title bar appears in the form of a drop-down menu:

6. Yearrange: set the year range displayed in the Drop-down list box, either relative to this year (-NN:+NN) or relative to the selected year (C-NN:C+NN) or absolute year (NNNN:NNNN)
Add attributes to JS code:

$ ("#datepicker"). DatePicker ({
changeyear:true,
yearrange: "2011:2012"
});

Screenshot of Effect:

From the figure you can see the position of the year in the form of a Drop-down menu, where the Drop-down menu will only show 2011 and 2012 options.
Note: The Yearrange property is used only if Changeyear is true.

7, Numberofmonths: set to show a few months. Can be a two-digit array representing the number of rows and columns displayed
JS Code:

$ ("#datepicker"). DatePicker ({
numberofmonths:3
});

The above specified numberofmonths is 3, then the pop-up calendar panel will display the current and the next two months, as shown in figure:

8, Showon: set trigger selector event name
ButtonText: Specifies the text to be displayed on the trigger button, and the Showon property should be set to a button or both
Buttonimage: Specifies the URL of the pop-up button image, and ButtonText becomes the ALT value if set
Buttonimageonly: Whether to put the image behind the control as a trigger, and if set to true then the button will be left with only the picture as a button, and the page is more beautiful
Here I write three text boxes to compare the above properties:
1) JS Code:

$ ("#datepicker2"). DatePicker ({
Showon: "Both",
buttontext: "Calendar button"
});

Screenshot of Effect:

2) Set the button to a picture:
JS Code:

$ ("#datepicker"). DatePicker ({
showon: "button",
buttonimage: "Images/calendar.gif",
buttonimageonly: True
});

Through the above comparison, we can understand the function of Buttonimageonly property.
9, MinDate: can choose the minimum date, null means unlimited
maxdate: The maximum date that can be selected. Null means no Limit
Both are based on the date of the day.
JS Code:

$ (function () {
$ ("#datepicker"). DatePicker ({
//Express on the same day, only 20 days before and 10 days after the date between the time can choose
mindate: -20,
MaxDate: "+10d"
});

The following figure is not selectable before number 7th (current date is 27):

The above is the jquery UI DatePicker time control of the use of in-depth learning, for the next study lay the foundation, I hope you continue to focus on the jquery UI DatePicker Time control end of the learning.