jquery UI DatePicker Time Control Usage (final version) _jquery

Recently used in the project date control, feel good, write to share for everyone to see, I limit the start time and end time span of not more than three days, and configured with empty time, re-election time and other functions, to share with you:
Let's show you two pictures.

In the example I control the start time and the end time is three days, that is, the start time and the end time span cannot exceed three days.

Specifically how to achieve, the code will be accompanied by a very detailed explanation, please continue to look down:

The first step is to introduce control JS, here are two, one is Jquery.js, one is jquery-ui-datepicker.js, and of course, the introduction of the style file:

<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 "/>

The second step: Create a text input box, the text type of input, my demo also writes the setting of the vacuuming time, 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 be greater than 3 days "/>
    <input type=" button "class=" Formbutton "value=" empty "Onclick=" cleaprevinput (this); " />
    <font color= "Red" > Required *</font>
   </td>
   <td width= "35%" >
    <label> Ending Time:</label>
    <input type= "text" name= "End" id= "ends" value= "${params.end}" readonly= "true" title= " The date range cannot be greater than 3 days "/>
    <input type=" button "class=" Formbutton "value=" Empty "onclick=" cleaprevinput (this); " />
    <font color= "Red" > Required *</font>
   </td>

The value of the inside do not tube, I this is written in the project code, the value is written in order to query after the page refresh time box can still have a choice of time value.

The following code is called the date control, and the code is as follows:

$ (function () {//Get the object that invokes the control var dates = $ ("#start, #end");
 var option;
 Set the target time, because the start time and end time in the example is a time limited var targetdate;
 var optionend;
 var targetdateend; Dates.datepicker ({showbuttonpanel:false,//When selecting time to trigger this event onselect:function (selectedDate) {if (this.id = "Start")
   ") {//If the Start time option is selected =" MinDate ";
   Gettimebydatestr This method code will be posted below, is the processing time code var selectedtime = gettimebydatestr (selectedDate);
   var mintime = Selectedtime;
   targetdate = new Date (mintime);
   Set End Time Optionend = "MaxDate";
   Targetdateend = new Date (mintime+2*24*60*60*1000);
   }else{//If is selected the end time option = "MaxDate";
   var selectedtime = gettimebydatestr (selectedDate);
   var maxtime = Selectedtime;
   targetdate = new Date (maxtime);
   Set start time Optionend = "MinDate";

   Targetdateend = new Date (maxtime-2*24*60*60*1000); //Set time in the timeline, for example, depending on the start time of the selection, the option to limit the end time, Dates.not (this) is used by the JS selector,//datepicker ("option", option, targetdate), This is the API for the date control package. Dates.not (this). datEpicker ("option", option, targetdate); 
  Dates.not (This). DatePicker ("option", Optionend, Targetdateend);
}
 });

 });

The following first code in the Gettimebydatestr (XXX) method of the code posted out, we look at the convenience, the code is very simple, I believe that we can understand:

Obtains its time function based on a date string
gettimebydatestr (datestr) {
 var year = parseint (datestr.substring (0,4));
 var month = parseint (datestr.substring (5,7), 1);
 var day = parseint (datestr.substring (8,10);
 return new Date (year, month, day). GetTime ();
}

The code can now implement the use of the date control, and start time and end time limit within three days, such as you choose the start time for 2014-03-27, then the end of the time only 27,28,29 three days, the rest of the date is not clickable, if you choose the end time of 28, then, Now the start time can only choose 28,27,26, and so on.

Step Three: Everyone look at the empty button, the empty button is the value of the empty Time selection box , this implementation is very simple:

Clears the Calendar control
function Cleaprevinput (OBJS) {
 //empties the value in the input box, but only clears the value, and the time control's optional value limit is
 $ (OBJS). Prev (). Val ("");
 If the start time and end time are cleared, then it should be that the box you have chosen has no time limit, that is, you can choose the date
 if ($ (' #start ') randomly. val () = "" && $ (' #end '). val () = "" {
 var dates = $ ("#start, #end");
 Invoke the API in the DatePicker package so that the start and end times just set are empty so that you can select any date
 dates.datepicker ("option", "MinDate", null);
 Dates.datepicker ("option", "MaxDate", null);
 }

Now you can use, if you just use the control, do not need to set a time limit is very simple, the above code can be used for most of the date selection requirements, but if there is special, you need to check the API, then I simply to empty the date control in the value, This is the code: Dates.datepicker ("option", "MaxDate", null), the search for a Half-day API, or the need for everyone to have enough patience.

The above is about the jquery UI DatePicker time Control all the content of the introduction, temporarily painted a period, and then have related articles, must be the first time to share with you.