How to Use the jquery UI Datepicker time control (final version) and jquerydatepicker

How to Use the jquery UI Datepicker time control (final version) and jquerydatepicker

The date control is used in recent projects. It feels good to write it out and share it with you. I have limited the start time and End Time to no more than three days, and configured a clearing time, share with you the following functions:
Let's show you two.

In this example, the start time and end time are three days, that is, the start time and end time cannot exceed three days.

The Code will provide a detailed explanation of how to implement it. Please continue to look at it:

The first step, introduce control js, here there are two, one is jquery. js, one is jquery-ui-datepicker.js, of course there are introduced style files:

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

Step 2: Create a text input box, text-type input. In my demo, the clearing time setting is also written, that is, a button RESPONSE event.

<Td width = "35%"> <label> Start Time: </label> <input type = "text" name = "start" id = "start" value = "$ {params. start} "readonly =" true "title =" Date range cannot exceed 3 days "/> <input type =" button "class =" formButton "value =" clear "onclick =" cleaPrevInput (this ); "/> <font color =" red "> required * </font> </td> <td width =" 35% "> <label> End Time: </label> <input type = "text" name = "end" id = "end" value = "$ {params. end} "readonly =" true "title =" Date range cannot exceed 3 days "/> <input type =" button "class =" formButton "value =" clear "onclick =" cleaPrevInput (this ); "/> <font color =" red "> required * </font> </td>

There is no need to worry about the value. I wrote this code in the project. The value is written in this way to query and refresh the page. The time box can still have the selected time value.

The following code calls the date control:

$ (Function () {// obtain the object var dates of the Call Control =$ ("# start, # end"); var option; // set the target time, in this example, the start time and end time are var targetDate; var optionEnd; var targetDateEnd; dates. datepicker ({showButtonPanel: false, // trigger this event onSelect: function (selectedDate) {if (this. id = "start") {// if you have selected the start time option = "minDate"; // the code for the getTimeByDateStr method will be pasted below, code for processing time var selectedTime = getTimeByDateStr (selectedDate); var minTime = selectedTime; targetDate = new Date (minTime); // set the end time optionEnd = "maxDate "; targetDateEnd = new Date (minTime + 2*24*60*60*1000);} else {// if the end time option = "maxDate" is selected "; var selectedTime = getTimeByDateStr (selectedDate); var maxTime = selectedTime; targetDate = new Date (maxTime); // set the start time optionEnd = "minDate "; targetDateEnd = new Date (maxTime-2 * 24*60*60*1000);} // set the time in the time box, for example, depending on the selected start time, the end time limit is not option, dates. not (this) is used by the js selector. // datepicker ("option", option, targetDate). this is the dates api encapsulated by the date control. not (this ). datepicker ("option", option, targetDate); dates. not (this ). datepicker ("option", optionEnd, targetDateEnd );}});});

Next, we will first paste the code of the getTimeByDateStr (XXX) method in the above Code. This code is easy to see. I believe you can understand it at a Glance:

// Obtain the time function getTimeByDateStr (dateStr) {var year = parseInt (dateStr. substring (0, 4); var month = parseInt (dateStr. substring (5, 7), 10)-1; var day = parseInt (dateStr. substring (8, 10), 10); return new Date (year, month, day ). getTime ();}

The code can now be used to implement the date control, and the start time and end time are limited to three days. For example, if you select the start time, the end time is only 27,28, three days in 29 days. You cannot click any other date. If you select 28 as the end time, you can only select 28, 27, and 26 as the start time.

Step 3: Check the Clear button. The clear button is the value in the clear time selection box.The implementation is simple:

// Clear the calendar control function cleaPrevInput (objs) {// clear the value in the input box, but only clear the value. The time control's selection limit is still $ (objs ). prev (). val (""); // If the start time and end time are cleared, there is no time limit in the box you choose, that is to say, you can select the date if ($ ('# start '). val () = "" & $ ('# end '). val () = "") {var dates = $ ("# start, # end"); // call the APIS encapsulated by datepicker, leave the set start time and end time blank, so that you can select any date for dates. datepicker ("option", "minDate", null); dates. datepicker ("option", "maxDate", null );}}

Now you can use it. If you only use the control, it is very easy to set the time limit. The above code can be used for most date selection needs, but if there is a special case, you still need to check the api by yourself. At that time, I just wanted to clear the value in the date control, which is the code: dates. datepicker ("option", "maxDate", null) queries the api for half a day and requires patience.

The above is an introduction to all the content of the jquery UI Datepicker time control. It is a full stop and will be shared with you in the future.