jQuery UI esempio - il selettore data (Datepicker)
Dalla finestra pop-up o un calendario in linea per selezionare una data.
Per ulteriori dettagli sulle componenti DatePicker, consultare la documentazione API membro selezione data (il Datepicker il Widget) .
La funzione di default
Data raccoglitrice (Datepicker) è destinato a un modulo standard sul campo di immissione. Spostare l'attenzione per l'ingresso (o usare il tasto tab per click) per aprire un calendario interattivo su una piccola sovrapposizione. Scegliere una data, cliccare qualsiasi punto della pagina (casella di inserimento non è più attivo), oppure fare clic sul tasto Esc per chiudere. Se si seleziona una data, il feedback viene visualizzato come il valore dell'ingresso.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
animazione
Utilizzare diverse animazioni quando si apre o si chiude il datepicker. Selezionare un filmato dal menu a tendina, e quindi fare clic nella casella di vedere il suo effetto. È possibile utilizzare uno qualsiasi dei tre dell'animazione di serie, effetti speciali, o utilizzare qualsiasi di una interfaccia utente.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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") .Per Passare (function () {
$ ( "#datepicker") .datepicker ( "Option", "showAnim", $ (this) .VAL ());
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Animazione: <br>
<Select id = "anim">
<Option value = "show"> Visualizza (di default) </ option>
<Option value = "slideDown"> presentazione </ option>
<Option value = "fadeIn"> Fade </ option>
<Option value = "alla cieca"> ciechi (tende UI effetti) </ option>
<Opzione value = "rimbalzo"> Bounce (rimbalzo effetti UI) </ option>
<Option value = "clip"> Clip (effetti di editing UI) </ option>
<Option value = "drop"> Drop (UI effetti atterrato) </ option>
<Option value = "piegare"> Fold (UI piegato effetti) </ option>
<Option value = "slide"> Presentazione (UI effetti scorrevole) </ option>
<Option value = ""> No </ option>
</ Select>
</ P>
</ Corpo>
</ Html>
Altri mesi dalla data di
datepicker può mostrare ulteriore data mese, queste date possono essere impostati opzionale.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - in altre mesi dalla data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
barra dei pulsanti di visualizzazione
Con booleani showButtonPanel per la selezione di visualizzazione della data odierna un pulsante "Oggi" per spegnere il calendario visualizza un opzione pulsante "Done". Per impostazione predefinita, quando un display barra dei pulsanti consentirà ogni pulsante, ma il pulsante può essere disattivato attraverso le altre opzioni. testo del pulsante può essere personalizzato.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Mostra pulsante della barra </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
visualizzazione in linea
datepicker è annidato nella visualizzazione della pagina, piuttosto che in uno strato di copertura. Basta chiamare il .datepicker div () può essere, invece di chiamare sull'ingresso.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI selezione data (Datepicker) - visualizzazione in linea </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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>
Data: <div id = "datepicker"> </ div>
</ Corpo>
</ Html>
Visualizzare il menu di Mese e Anno
casella a discesa visualizza il mese e l'anno, piuttosto che una mostra statica del titolo mese / anno, è facile abbracciare una vasta gamma di tempo sulla navigazione. Aggiungere un valore booleano changeMonth e changeYear opzione.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Mostra mese & amp; menù Anno </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: vero,
changeYear: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
Visualizzare più mesi
Impostazione numberOfMonths opzione è un intero 2 o un numero intero maggiore di 2, per essere visualizzato su un DatePicker più mesi.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - visualizzare più mesi </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
Formato data
In una varietà di modi per visualizzare le valutazioni data. Selezionare un formato di data dalla casella a discesa, quindi fare clic per selezionare una data nella casella di input, visualizzare il formato della data del monitor selezionato.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Formato data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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") .Per Passare (function () {
$ ( "#datepicker") .datepicker ( "Option", "dateFormat", $ (this) .VAL ());
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Opzioni di formato: <br>
<Select id = "format">
<Opzione value = "mm / gg / aa"> predefinito - gg / mm / aa </ option>
<Opzione value = "AA-MM-dd"> ISO 8601 - AA-MM-dd </ option>
<Option value = "d M, y"> corto - d M, y </ option>
<Option value = "d MM, y"> Media - d MM, y </ option>
<Option value = "DD, D MM, aa"> completa - DD, D MM, aa </ option>
<Option value = "& APOS; giorno & APOS; D 'della & APOS; MM & APOS, l'anno & APOS; YY"> con il testo -' giorno 'D' di 'MM' nel corso dell'anno 'aa </ option>
</ Select>
</ P>
</ Corpo>
</ Html>
icona di trigger
Fare clic sull'icona accanto alla casella di input per visualizzare il datepicker. Impostazione datepicker apre (comportamento di default) al fuoco, oppure fare clic sull'icona per aprire, o aprire / ricevere l'attivazione quando si fa clic sull'icona.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Icona di attivazione </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: "bottone",
buttonImage: "images / calendar.gif",
buttonImageOnly: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
agenda localizzata
La localizzazione datepicker lingua del calendario e il formato (il valore predefinito è formato inglese / occidentale). datepicker contiene supporto incorporato per le lingue di lettura da destra a sinistra, come l'arabo e l'ebraico.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - calendario localizzato </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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") .Per Passare (function () {
$ ( "#datepicker") .datepicker ( "Option",
$ .datepicker.regional [$ (This) .VAL ()]);
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> & nbsp;
<Select id = "locale">
<Option value = "ar"> arabo (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Option value = "zh-TW"> Cinese tradizionale (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Option value = ""> English </ option>
<Opzione value = "fr" selected = "selezionato"> Francese (Fran & ccedil; ais) </ option>
<Option value = "lui"> ebraico (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Select> </ p>
</ Corpo>
</ Html>
Popolare un'altra casella di input
Usa altField e altFormat opzioni ogni volta selezionare una data, la data sarà riempito con un certo formato in un altro campo di immissione. Quando questa funzione entro la data sull'ulteriore elaborazione del computer da usare, l'utente è presentato con una data di user-friendly.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - aumento di popolazione un'altra casella di input </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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, aa"
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> & nbsp; <input type = "text" id = dimensione "alternate" = "30"> </ p>
</ Corpo>
</ Html>
Limitare l'intervallo di date
Con minDate e maxDate opzione limita l'intervallo di date selezionabili. Impostare le date di inizio e di fine della data effettiva (new Date (2009, 1 - 1, 26)), o una stringa di valore di offset di oggi (-20), o come un ciclo e le unità ( '+ 1M + 10D '). Se impostato su una stringa, utilizzare la 'D' per giorni, utilizzando un 'W' rappresenta settimane, utilizzando 'M' per il mese, utilizzando la 'Y' è l'anno.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - limitare l'intervallo di date </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: "+ 1M + 10D"});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>
Selezionare un intervallo di date
Selezionare un intervallo di date per la ricerca.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Selezionare un intervallo di date </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: vero,
NUMBEROFMONTHS: 3,
onClose: function (selectedDate) {
$ ( "#to") .datepicker ( "Option", "MinDate", selectedDate);
}
});
$ ( "#to") .datepicker ({
defaultDate: "+ 1W",
changeMonth: vero,
NUMBEROFMONTHS: 3,
onClose: function (selectedDate) {
$ ( "#from") .datepicker ( "Option", "MaxDate", selectedDate);
}
});
});
</ Script>
</ Head>
<Body>
<Label for = "da"> da </ label>
<Input type = "text" id = "da" name = "da">
<Label for = "a"> a </ label>
<Input type = "text" id = "a" name = "a">
</ Corpo>
</ Html>
La Settimana dell'anno spettacolo
datepicker in grado di visualizzare le prime settimane dell'anno. Il valore di default è calcolato secondo la norma ISO 8601 Definizione: settimana a partire da Lunedi, la prima settimana dell'anno che contiene il primo Giovedi del. Ciò significa che in un anno e può essere un altro paio di giorni della settimana.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI data picker (Datepicker) - visualizzare prime settimane dell'anno </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: vero,
FirstDay: 1
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Corpo>
</ Html>