jQuery UI Beispiel - die Datumsauswahl (Datumsauswahl)
Aus dem Pop-up-Fenster oder Inline-Kalender um ein Datum auszuwählen.
Weitere Details über die picker Komponenten, die API - Dokumentation Datumsauswahl Mitglied (die Datumsauswahl das Widget) .
Die Standardfunktion
Datumsauswahl (Datumsauswahl) auf einem Standardformular auf das Eingabefeld gebunden. Bewegen Sie den Fokus auf den Eingang (oder die Tab-Taste verwenden, um klicken) einen interaktiven Kalender auf einem kleinen Overlay zu öffnen. Wählen Sie ein Datum, auf eine beliebige Stelle auf der Seite (Eingabefeld den Fokus verloren hat), oder klicken Sie auf die Esc-Taste zu schließen. Wenn Sie ein Datum auswählen, wird die Rückmeldung, wenn der Wert des Eingangs angezeigt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Die Standardfunktion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
Animation
Verwenden Sie unterschiedliche Animationen beim Öffnen oder das picker schließen. Wählen Sie einen Film aus dem Drop-Down-Box, und klicken Sie dann in der Box um seine Wirkung zu sehen. Sie können eine der drei Standard-Animation, Spezialeffekte verwenden oder eine beliebige einer Benutzeroberfläche verwenden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (Function () {
$ ( "#datepicker") .datepicker ( "Option", "showAnim", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "Datepicker" size = "30"> </ p>
<P> Animation: <br>
<Wählen Sie id = "Anim">
<Option value = "show"> Show (Standard) </ option>
<Option value = "slidedown"> Dia </ option>
<Option value = "fadeIn"> Fade </ option>
<Option value = "blind"> Blind (UI Jalousien Effekte) </ option>
<Option value = "bounce"> Bounce (UI Rebound-Effekte) </ option>
<Option value = "clip"> Clip (UI Bearbeitungseffekte) </ option>
<Option value = "drop"> Drop (UI Effekte gelandet) </ option>
<Option value = "fold"> Falten (UI gefalteten Effekte) </ option>
<Option value = "slide"> Slide (UI Gleiteffekte) </ option>
<Option value = ""> Nein </ option>
</ Select>
</ P>
</ Body>
</ Html>
Andere Monate nach dem Datum
picker können zusätzliche Monat Datum zeigen, diese Daten zu optional eingestellt werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - in anderen Monaten nach dem Tag </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: true,
selectOtherMonths: true
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
Display-Taste bar
Durch boolean showButtonPanel für die Auswahl der Datumsanzeige des heute ein "Heute" , um den Kalender zu deaktivieren zeigt eine Schaltfläche "Fertig" Option. In der Standardeinstellung, wenn eine Schaltfläche Balkenanzeige jede Taste aktivieren, aber die Taste kann durch die anderen Optionen ausgeschaltet werden. Button-Text kann angepasst werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Display-Taste bar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
Display-Inline
picker ist in der Seitenanzeige verschachtelt, anstatt in einer Deckschicht. Rufen Sie einfach die div .datepicker () kann es sich stattdessen auf die Eingabe des Aufrufs.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Inline-Display </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
Datum: <div id = "Datepicker"> </ div>
</ Body>
</ Html>
Anzeige Monat & Jahr Menü
Dropdown-Feld zeigt den Monat und das Jahr, anstatt eine statische Anzeige des Monats / Jahr Titel, es ist einfach eine große Auswahl an Zeit für die Navigation zu überspannen. Fügen Sie einen Booleschen Wert changeMonth und changeYear Option.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Anzeige Monat & amp; Jahr Menü </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
changeMonth: true,
changeYear: true
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
mehrere Monate anzeigen
Einstellen numberOfMonths Option ist eine ganze Zahl 2 oder eine ganze Zahl größer als 2 ist , auf einem Datumsauswahl mehrere Monate angezeigt werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Zeigen Sie mehrere Monate </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS: 3,
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
Datumsformat
In einer Vielzahl von Möglichkeiten, um das Datum Feedback anzuzeigen. Wählen Sie ein Datumsformat aus dem Dropdown-Feld, dann klicken und ein Datum in das Eingabefeld auswählen, sehen Sie das Datumsformat des gewählten Displays.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Datumsformat </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (Function () {
$ ( "#datepicker") .datepicker ( "Option", "Datumsformat", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "Datepicker" size = "30"> </ p>
<P> Format-Optionen: <br>
<Wählen Sie id = "Format">
<Option value = "mm / tt / jj"> Standard - mm / tt / jj </ option>
<Option value = "yy-mm-dd"> ISO 8601 - yy-mm-dd </ option>
<Option value = "d M, y"> Short - d M, y </ option>
<Option value = "d MM, y"> Medium - d MM, y </ option>
<Option value = "DD, d MM, JJ"> Voll - DD, d MM, JJ </ option>
<Option value = "& apos; Tag & apos; d & apos; von & apos; MM & apos; im Jahr & apos; yy"> Mit Text - 'Tag' d 'von' MM 'im Jahr yy </ option>
</ Select>
</ P>
</ Body>
</ Html>
Trigger-Symbol
Klicken Sie auf das Symbol neben dem Eingabefeld, um die Datumsauswahl angezeigt werden soll. Einstellen picker öffnet sich (Standardverhalten) im Fokus, oder klicken Sie auf das Symbol zu öffnen, oder öffnen / Fokus erhalten, wenn sie auf das Symbol klicken.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Triggersymbol </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOn: "Button",
buttonImage: "images / calendar.gif",
buttonImageOnly: true
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
Lokalisierte Kalender
Localization picker Kalender Sprache und Format (die Standardeinstellung ist Englisch / Western-Format). picker enthält eine integrierte Unterstützung für Rechts-nach-Links-Lese Sprachen wie Arabisch und Hebräisch.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - lokalisierte Kalender </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
$ ( "#locale") .change (Function () {
$ ( "#datepicker") .datepicker ( "Option",
$ .datepicker.regional [$ (Diese) .val ()]);
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> & nbsp;
<Wählen Sie id = "locale">
<Option value = "ar"> Arabisch (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Option value = "zh-TW"> Chinese Traditional (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Option value = ""> Englisch </ option>
<Option value = "fr" selected = "selected"> Französisch (Fran & ccedil; ais) </ option>
<Option value = "er"> Hebräisch (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Select> </ p>
</ Body>
</ Html>
Füllen Sie ein weiteres Eingabefeld
Verwenden Sie altField und altFormat Optionen , wenn Wählen Sie ein Datum, wird das Datum mit einem bestimmten Format in ein anderes Eingabefeld gefüllt werden. Wenn diese Funktion durch das Datum auf dem Computer freundliche Weiterverarbeitung, wird der Benutzer mit einer benutzerfreundlichen Datum dargestellt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - bevölkern ein weiteres Eingabefeld </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate",
altFormat: "DD, d MM, JJ"
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> & nbsp; <input type = "text" id = "alternate" size = "30"> </ p>
</ Body>
</ Html>
Begrenzen Sie den Datumsbereich
Durch minDate und maxDate Option begrenzt die auswählbaren Datumsbereich. Stellen Sie die Start- und Enddatum des aktuellen Datums (new Date (2009, 1 - 1, 26)) oder eine Reihe von heutigen Offsetwert (-20) oder als Zyklus und Einheiten ( '+ 1 M + 10D '). Wenn auf eine Zeichenkette gesetzt, verwenden Sie die 'D' für Tage, mit einem "W" steht für Wochen, mit 'M' für den Monat, mit dem "Y" das Jahr ist.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - begrenzen den Datumsbereich </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({MinDate: -20, MaxDate: "+ 1 M + 10D"});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>
Wählen Sie einen Datumsbereich
Wählen Sie ein Datum Bereich zu suchen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Wählen Sie einen Datumsbereich </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#from") .datepicker ({
defaultDate: "+ 1W",
changeMonth: true,
NUMBEROFMONTHS: 3,
onClose: function (selectedDate) {
$ ( "#Um") .datepicker ( "Option", "minDate", selectedDate);
}
});
$ ( "#Um") .datepicker ({
defaultDate: "+ 1W",
changeMonth: true,
NUMBEROFMONTHS: 3,
onClose: function (selectedDate) {
$ ( "#from") .datepicker ( "Option", "MaxDate", selectedDate);
}
});
});
</ Script>
</ Head>
<Body>
<Label for = "von"> von </ label>
<Input type = "text" id = "von" name = "von">
<Label for = "auf"> bis </ label>
<Input type = "text" id = "auf" name = "auf">
</ Body>
</ Html>
Die Woche des Jahres zeigen
picker können die ersten paar Wochen des Jahres anzuzeigen. Woche beginnt am Montag, die erste Woche des Jahres, die die ersten Donnerstag enthält: Der Standard wird in Übereinstimmung mit ISO 8601 Definition berechnet. Dies bedeutet, dass ein Jahr und in der Woche noch ein paar Tage sein kann.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Datumsauswahl (Datumsauswahl) - Anzeige ersten Wochen des Jahres </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showWeek: true,
FirstDay: 1
});
});
</ Script>
</ Head>
<Body>
<P> Datum: <input type = "text" id = "picker"> </ p>
</ Body>
</ Html>