Die jQuery-Benutzeroberfläche verwendet das Datepicker-Plug-in, um das Startdatum (minDate) und das Enddatum (maxDate)_jquery zu implementieren-js-Tutorial-php.cn

Die jQuery-Benutzeroberfläche verwendet das Datepicker-Plug-in, um das Startdatum (minDate) und das Enddatum (maxDate)_jquery zu implementieren

WBOY

Freigeben： 2016-05-16 16:47:14

Original

1295 Leute haben es durchsucht

Um jQuery ui verwenden zu können, müssen Sie zunächst die jQuery-Klassenbibliothek, das jQuery ui js-Skript und das jQuery ui CSS-Stylesheet vorstellen. Das Codebeispiel lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

 

< ;link rel ="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

Hinweis: Bei der Einführung von js-Skripten müssen Sie zuerst die jQuery-Klassenbibliothek und dann das jQuery-UI-Skript vorstellen

Im Folgenden sind zwei Implementierungsschritte aufgeführt:

Idee 1:

Der erste Schritt besteht darin, zwei Datepicker-Komponenten zu implementieren.

Sie müssen zwei Eingabe-Tags definieren, der Typ ist Text, und das ID-Attribut

angeben

Der HTML-Code lautet wie folgt

Code kopieren Der Code lautet wie folgt:

Startdatum:
Enddatum:

Rufen Sie die jQuery-Objekte der beiden Eingabeelemente im js-Code ab und konvertieren Sie sie in Datepicker-Komponenten

Der Js-Code lautet wie folgt

Code kopieren Der Code lautet wie folgt:

 $(document).ready(function( ){ 
                                                                                                                             
Nachdem Sie den oben genannten Vorgang ausgeführt haben, klicken Sie auf das Textfeld auf der Seite. Wenn die Datumsauswahl angezeigt wird, bedeutet dies, dass Sie erfolgreich waren. 

Schritt 2: Legen Sie das Start- und Enddatum fest

Wenn der Wert für das Startdatum ausgewählt ist, sollte der Mindestwert des Enddatums das Startdatum sein. Wenn das Enddatum ausgewählt ist, sollte der Höchstwert des Startdatums das Enddatum sein. Wir können das Attribut onSelect im Datepicker verwenden, um das Ereignis festzulegen, das ausgelöst wird, wenn das angegebene Datum ausgewählt wird, und dieses Ereignis verwenden, um das entsprechende Mindestdatum oder Maximaldatum des Datepickers anzugeben.

Der Js-Code lautet wie folgt

Code kopieren

Der Code lautet wie folgt:$("#start").datepicker ({ onSelect:function(dateText,inst){ $("#end").datepicker("option","minDate",dateText);

}

});
$( "#end").datepicker({
 onSelect:function(dateText,inst){
 $("#start").datepicker("option","maxDate",dateText);
 }
});

Hinweis: Das dateText-Attribut in der anonymen Funktion ist die Zeichenfolge des aktuell ausgewählten Datums

Idee 2:

Der erste Schritt besteht darin, zwei Textfeldobjekte gleichzeitig abzurufen und sie in Datepicker umzuwandeln (mithilfe des jQuery-Selektors)

Der HTML-Code lautet wie folgt

Code kopieren

Der Code lautet wie folgt:Startdatum: Enddatum:

Der Js-Code lautet wie folgt

Code kopieren

Der Code lautet wie folgt:var date = $("#start, #end" );dates.datepicker();

Der zweite Schritt: Lösen Sie ebenfalls nach der Auswahl des Datums das onSelect-Ereignis aus und rufen Sie die Funktion auf, um den selectedDate-Parameter 
 zu übergeben

Bestimmen Sie im Funktionskörper zunächst, ob das Auslöseereignis das Startdatum oder das Enddatum ist. Verwenden Sie diese Beurteilung, um minDate oder maxDate festzulegen und festzulegen, und verwenden Sie dann die Funktion not(), um umgekehrt ein anderes Datepicker-Objekt auszuwählen und dessen festzulegen entsprechende Eigenschaft. 

Der Js-Code lautet wie folgt

Code kopieren

Der Code lautet wie folgt:dates.datepicker({ onSelect : function( selectedDate){ var option = this.id == "start" ? "minDate" : "maxDate";

dates.not(this).datepicker("option", option, selectedDate);

}
});

Auf diese Weise wird nach dem Festlegen einer Partei die andere Partei eingeschränkt.

Der erzielte Effekt ist wie folgt:

Die jQuery-Benutzeroberfläche verwendet das Datepicker-Plug-in, um das Startdatum (minDate) und das Enddatum (maxDate)_jquery zu implementieren