Verwendung der Zeitsteuerung von jquery UI Datepicker (3)

Dieser Artikel ist die endgültige Version der Verwendung der jquery UI Datepicker-Zeitsteuerung. Die implementierte Funktion hat eine begrenzte Start- und Endzeitspanne von nicht mehr als drei Tagen und ist mit Löschzeit, Neuauswahlzeit usw. konfiguriert. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Lassen Sie mich Ihnen zunächst zwei Renderings zeigen

In dem Beispiel betragen die Startzeit und die Endzeit, die ich kontrolliere, drei Tage, das heißt, die Zeitspanne zwischen der Startzeit und der Endzeit kann nicht drei Tage überschreiten.

Wie wird es konkret implementiert? Im Code wird es eine sehr detaillierte Erklärung geben:

Der erste Schritt besteht darin, die Steuerelemente js einzuführen ist jquery-ui-datepicker.js und stellt natürlich die Stildatei vor:

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

Schritt 2: Erstellen Sie ein Texteingabefeld, geben Sie den Texttyp ein und die Löschzeiteinstellung ist auch in meiner Demo geschrieben Das heißt, eine Schaltfläche reagiert auf ein Ereignis. Sie müssen sich keine Gedanken über den darin enthaltenen Wert machen. Der Wert wird so geschrieben, wenn die Seite aktualisiert wird Nach der Abfrage kann noch ein ausgewählter Zeitwert in der Zeitbox vorhanden sein. Der folgende Code dient zum Aufrufen der Datumssteuerung. Der Code lautet wie folgt:

<td width="35%">
    <label>开始时间：</label>
    <input type="text" name="start" id="start" value="${params.start}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>
   <td width="35%">
    <label>结束时间：</label>
    <input type="text" name="end" id="end" value="${params.end}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>

Lassen Sie uns nun den Code der getTimeByDateStr(XXX)-Methode für die Bequemlichkeit aller veröffentlichen kann es auf einen Blick verstehen. :

rrree

Der Code kann jetzt die Verwendung der Datumssteuerung realisieren und die Startzeit und Endzeit sind auf drei Tage begrenzt, wenn Sie beispielsweise die Startzeit als 27.03.2014 wählen , dann ist die Endzeit nur 27, 28 und 29. Die Tage sind optional und die anderen Daten sind nicht anklickbar. Wenn Sie die Endzeit als 28 wählen, können Sie nur 28, 27 und 26 als Start wählen Zeit, das ist es.

Schritt 3: Alle, schauen Sie sich die Schaltfläche „Löschen“ an, um den Wert im Zeitauswahlfeld zu löschen.

$(function(){
 // 获取调用控件的对象
 var dates = $("#start,#end");
 var option;
 //设置目标时间，因为例子中的开始时间和结束时间是有时间限制的
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  //当选择时间的时候触发此事件
  onSelect: function(selectedDate){ 
   if(this.id == "start"){
   // 如果是选择了开始时间
   option = "minDate";
   //getTimeByDateStr 这个方法的代码下面会贴出来的，就是处理时间的代码
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
   targetDate = new Date(minTime);
   //设置结束时间
   optionEnd = "maxDate";
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间
   option = "maxDate";
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //设置开始时间
   optionEnd = "minDate";
   targetDateEnd = new Date(maxTime-2*24*60*60*1000);

   }
   //设置时间框中时间，比如根据选择的开始时间，限制结束时间的不可选项,dates.not(this)是js选择器使用，
   //datepicker("option", option, targetDate),这个就是日期控件封装的api了
   dates.not(this).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
});

Es kann jetzt verwendet werden Verwenden Sie das Steuerelement, es sind keine Einstellungen erforderlich. Der obige Code kann für die meisten Datumsauswahlanforderungen verwendet werden. Wenn es jedoch etwas Besonderes gibt, müssen Sie die API zu diesem Zeitpunkt einfach selbst überprüfen Ich wollte den Wert im Datumssteuerelement löschen, bei dem es sich um diesen Code handelte: date.datepicker("option", "maxDate", null). Ich habe die API nur lange überprüft, aber ich brauche immer noch, dass alle genug Geduld haben. Das Obige ist die gesamte Einführung in die Zeitsteuerung von jquery UI. Sie ist vorerst zu Ende. Wenn es in Zukunft verwandte Artikel gibt, werde ich sie so schnell wie möglich mit Ihnen teilen. 🔜

Das obige ist der detaillierte Inhalt vonVerwendung der Zeitsteuerung von jquery UI Datepicker (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!