Eine kurze Diskussion über die DatePicker-Datumsbereichsauswahl von Bootstrap

Jetzt werde ich Ihnen eine kurze Diskussion über die DatePicker-Datumsbereichsauswahl von Bootstrap geben. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

Bei der Verwendung von Datums-Plugins besteht häufig ein Bedarf. Zwei Auswahlmöglichkeiten im Eingabefeld. Die Startzeit ist kleiner als die Endzeit, die Endzeit ist größer als die Startzeit und die Startzeit und die Endzeit sind nicht größer als die aktuelle Zeit.

Natürlich können wir anhand des Auswahlergebnisses beurteilen, ob die Eingabe korrekt ist oder nicht. Ein besserer Ansatz wäre jedoch, wenn unsere Datumsauswahl einige Einschränkungen hinzufügen würde.

Bootstrap ist mit einem hervorragenden Datumsauswahl-Plug-in ausgestattet. DatePicker und DateTimePicker.

Die beiden Funktionen sind sehr ähnlich. Auch die Art der Anwendung ist ähnlich. DatePicker unterstützt mehr Ereignisse und Einstellungen.

Schauen Sie sich die API an, um zu erfahren, dass es ein Ereignis „changeDate“ geben wird, wenn sich das Datum ändert. Wenn sich das ausgewählte Datum ändert, wird der Rückruf aufgerufen, den wir zu dieser Veranstaltung gegeben haben. Doch leider scheint dieses Ereignis nicht ausgelöst zu werden, wenn wir das Datum direkt in das Eingabefeld eingeben oder löschen. So können Sie das Attribut schreibgeschützt zum Eingabefeld hinzufügen. Geben Sie den schreibgeschützten Status ein und geben Sie der Datumssteuerung eine Schaltfläche zum Löschen. Auf diese Weise kann die Änderung des Datums normalerweise nur über das Datums-Plugin gesteuert werden.

Wenn Sie jedoch das DateTimePicker-Plug-in verwenden, um auf die Schaltfläche „Löschen“ zu klicken, wird der Fehler Uncaught TypeError: Cannot read property 'getTime' of null gemeldet. Infolgedessen kann das changeDate-Ereignis nicht normal verwendet werden.

Also habe ich stattdessen das DatePicker-Plug-in verwendet.

Wenn sich dann das Datum eines Eingabefelds ändert (einschließlich Löschung), wird das Ereignis „changeDate“ ausgelöst und der optionale Bereich eines anderen Eingabefelds wird in seiner Rückruffunktion geändert.

Wenn DatePicker außerdem möchte, dass die Benutzeroberfläche Chinesisch anzeigt, muss er auch CSS laden. bootstrap-datepicker.zh-CN.min.js.

Das Folgende ist der Code:

function DatePicker(beginSelector,endSelector){
  // 仅选择日期
  $(beginSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView: 0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){  	
  	if(ev.date){
  		$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
  	}else{
  		$(endSelector).datepicker('setStartDate',null);
  	}
  })

  $(endSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView:0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){ 
  	if(ev.date){
  		$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
  	}else{
  		$(beginSelector).datepicker('setEndDate',new Date());
  	} 

  })
}

DatePicker("#date_begin","#date_end");

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ein einfaches Beispiel für die Verwendung von AJAX zur Implementierung der Seitenanmeldung und der Überprüfung des registrierten Benutzernamens

Schleifenschema in Ajax

Eine schnelle Lösung für Ajax, um das Objekt Object zurückzugeben

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die DatePicker-Datumsbereichsauswahl von Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!