Analyse zur Verwendung der Zeitsteuerung von jquery UI Datepicker

Dieser Artikel ist die endgültige Version der Zeitsteuerung von jquery UI. Man kann sagen, dass es sich um eine Sublimation der Technologie handelt. Die implementierte Funktion hat eine begrenzte Startzeit und Endzeitspanne von nicht mehr als drei Tagen. und ist mit einer Löschzeit und einer Neuauswahlzeit usw. konfiguriert. Interessierte Freunde können sich auf

beziehen. Ich habe es in den letzten Projekten verwendet. Ich habe es aufgeschrieben und mit allen geteilt. Die Start- und Endzeitspanne meines Limits sollte drei Tage nicht überschreiten und ist mit Löschzeit, Neuauswahlzeit und anderen Funktionen konfiguriert. Teilen Sie es mit allen:
Lassen Sie mich Ihnen zuerst zwei Renderings zeigen

Im Beispiel betragen die von mir kontrollierte Startzeit und Endzeit drei Tage, d. h. die Zeitspanne zwischen der Startzeit und der Endzeit darf nicht überschritten werden drei Tage.

Wie wird es konkret implementiert? Im Code finden Sie eine ausführliche Erklärung:

Der erste Schritt besteht darin, die Steuerelemente hier einzuführen Es gibt zwei, eines ist jquery.js, eines ist jquery-ui-datepicker.js, und natürlich gibt es die Einführung von Stildateien:

<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, eine Texttypeingabe. Meine Demo enthält auch die Einstellung der Löschzeit, bei der es sich um ein Schaltflächenreaktionsereignis handelt

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

Machen Sie sich keine Sorgen über den darin enthaltenen Wert. Der Wert wird so geschrieben, dass die Seite danach aktualisiert wird Bei der Abfrage ist das Zeitfeld weiterhin vorhanden. Sie können einen Zeitwert auswählen.

Der folgende Code dient zum Aufrufen der Datumssteuerung. Der Code lautet wie folgt:

$(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); 
  }
 });
});

Das Folgende ist die Methode getTimeByDateStr(XXX). Im obigen Code ist der Code für die Bequemlichkeit aller veröffentlicht:

//根据日期字符串取得其时间
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();
}

Der Code kann jetzt verwendet werden, um die Datumssteuerung zu verwenden, und die Startzeit und Endzeit sind auf drei Tage begrenzt. Wenn Sie beispielsweise die Startzeit als 27.03.2014 wählen, ist die Endzeit nur für drei Tage verfügbar Tage: 27, 28 und 29. Die anderen Daten sind nicht anklickbar. Wenn Sie „Ende“ wählen, ist die Zeit 28, also kann die Startzeit jetzt nur 28, 27 oder 26 sein, das war's.

Schritt 3: Sehen Sie sich die Schaltfläche „Löschen“ an, um den Wert im Zeitauswahlfeld zu löschen Dies ist sehr einfach zu implementieren:

//清空日历控件
function cleaPrevInput(objs){
 //清空输入框中的值，但是仅仅是清空了值而已，时间控件的选值限制还在的
 $(objs).prev().val("");
 //如果开始时间和结束时间都清空了，这时应该是你选择的那个框中是没有时间限制的，也就是说可以随便选择日期
 if($('#start').val()=="" && $('#end').val()==""){
 var dates = $("#start,#end");
 //调用datepicker封装的api，使刚刚设置的开始时间和结束时间为空，这样就可以选择任意日期了
 dates.datepicker("option", "minDate", null);
 dates.datepicker("option", "maxDate", null);
 }
}

Es kann jetzt verwendet werden, wenn Sie nur das Steuerelement verwenden, ohne ein Zeitlimit festzulegen. Der obige Code kann für die meisten Datumsauswahlen verwendet werden Bedarf, aber wenn es etwas Besonderes gibt, müssen Sie die API noch selbst überprüfen. Zu diesem Zeitpunkt wollte ich nur den Wert in der Datumssteuerung löschen, bei dem es sich um diesen Code handelt: date.datepicker("option", "maxDate ", null), und ich habe die API lange überprüft. Es erfordert immer noch, dass jeder genug Geduld hat.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Informationen zur Verwendung der Bootstrap-Navigationsleiste der JS-Komponente

Analyse der jQuery-Datei-Upload-Steuerung Uploadify

So verwenden Sie Bootstrap Time Control Daterangepicker

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