So wählen Sie einen Datumsbereich mithilfe der DatePicker-Eigenschaft von Bootstrap aus

Dieses Mal zeige ich Ihnen, wie Sie einen Datumsbereich für das DatePicker-Attribut von Bootstrap auswählen Was sind die Vorsichtsmaßnahmen für die Auswahl eines Datumsbereichs für das DatePicker-Attribut von Bootstrap? Ein praktischer Fall, schauen wir uns das gemeinsam an.

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");

Bootstrap DatePicker implementiert die Datumsauswahl. Das Startdatum ist nicht größer als die Endzeit, die Endzeit ist nicht kleiner als die Startzeit und sowohl das Startdatum als auch das Enddatum sind nicht größer als das aktuelle Datum.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax implementiert den gesamten Prozess der Registrierung eines Benutzernamens

Ajax+PHP-Dateninteraktionsimplementierung

Das obige ist der detaillierte Inhalt vonSo wählen Sie einen Datumsbereich mithilfe der DatePicker-Eigenschaft von Bootstrap aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!