jQuery UI API - il membro selezione data (Datepicker Widget)

categoria

Widget (Widget)

uso

Descrizione: Dalla finestra pop-up o un calendario in linea per selezionare una data.

Nuova versione: 1.0

jQuery UI data picker (Datepicker) Selezionare la data per aggiungere altezza alla pagina per configurare il plug-in. È possibile personalizzare il formato della data e la lingua, limitare l'intervallo di date selezionabili, aggiungere pulsanti e le altre opzioni di navigazione.

Per impostazione predefinita, quando l'associato messa a fuoco campo di testo, in un piccolo overlay data di aprire il selettore. Per un calendario in linea, è sufficiente selezionare la data è fissata al div o arco.

l'interazione della tastiera

Quando la data di selezione è aperta, i seguenti comandi da tastiera sono disponibili:

• PAGE UP: passaggio al mese precedente.
• PAGE DOWN: Portare il mese prossimo.
• CTRL + PAGINA SU: Spostare l'anno precedente.
• CTRL + PGGIÙ: Spostare al prossimo anno.
• CTRL + HOME: Spostare il mese corrente. Se il selettore data è chiuso è aperto.
• CTRL + SINISTRA: passare al giorno.
• CTRL + DESTRA: A per il giorno successivo.
• CTRL + UP: mossa per la settimana precedente.
• CTRL + DOWN: Sposta la prossima settimana.
• ENTER: selezionare la data di messa a fuoco.
• CTRL + END: Chiudere calendario, e cancellare la data.
• ESCAPE: Chiudere calendario, senza alcuna scelta.

Funzioni utili

$ .datepicker.setDefaults (Impostazioni)

Modificare le impostazioni di default per tutti selezione data.

Utilizzare option() metodo per modificare le impostazioni per i singoli casi.

Impostare tutto il selettore data o fare clic sull'icona si apre quando la messa a fuoco.

$ .datepicker.setDefaults ({
  showOn: "entrambi",
  buttonImageOnly: vero,
  buttonImage: "calendar.gif",
  buttonText: "Calendario"
});

Imposta tutti selezione data è il testo francese.

$ .datepicker.setDefaults ($ .datepicker.regional [ "Fr"]);

$ .datepicker.formatDate (Formato, la data, le impostazioni)

Formattazione di una data per un valore di stringa con il formato specificato.

Format possono essere le seguenti combinazioni:

• d - giorno del mese (nessun zeri)
• dd - giorno del mese (due cifre)
• o - il giorno dell'anno (senza zeri)
• oo - il giorno dell'anno (tre cifre)
• Breve nome del giorno - D
• Nome giorno - DD
• m - i primi mesi dell'anno (senza zeri)
• mm - i primi mesi dell'anno (due cifre)
• Breve nome del mese - M
• Mese nome lungo - MM
• y - Anno (due cifre)
• aa - Anno (quattro cifre)
• @ - Timestamp Unix (ms dal 01/01/1970)
• ! - Finestre Watch (100ns dal 01/01/0001)
• '...' - Testo
• '' - I singoli apici
• Altro - Testo

Ci sono anche alcuni $.datepicker formato data standard predefinito:

• ATOM - 'AA-MM-dd' (e RFC 3339 / ISO 8601 stessa)
• BISCOTTO - 'D, dd M aa'
• ISO_8601 - 'AA-MM-dd'
• RFC_822 - 'D, G M' (vedi RFC 822)
• RFC_850 - 'DD, DD-mio' (vedi RFC 850)
• RFC_1036 - 'D, G M' (fare riferimento alla RFC 1036)
• RFC_1123 - 'D, d M aa' (vedi RFC 1123)
• RFC_2822 - 'D, d M aa' (vedi RFC 2822)
• RSS - 'D, G M' (uguale alla RFC 822)
• ZECCHE - '!'
• TIMESTAMP - '@'
• W3C - 'AA-MM-dd' (lo stesso di ISO 8601)

formato ISO per visualizzare la data. Produrre "2007-01-26".

$ .datepicker.formatDate ( "AA-MM-dd", nuovo Data (2007, 1 - 1, 26));

Francese per estendere il formato di visualizzazione della data. Produrre "Samedi, Juillet 14, 2007".

$ .datepicker.formatDate ( "DD, MM D, aa", new Date (2007 7-1, 14), {
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "fr"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "fr"] .monthNames
});

$ .datepicker.parseDate (Formato, il valore, le impostazioni)

Estrarre un valore di stringa da un formato di data specificato.

Format possono essere le seguenti combinazioni:

• d - giorno del mese (nessun zeri)
• dd - giorno del mese (due cifre)
• o - il giorno dell'anno (senza zeri)
• oo - il giorno dell'anno (tre cifre)
• D - nome breve della settimana
• DD - la settimana citarne alcuni
• m - i primi mesi dell'anno (senza zeri)
• mm - i primi mesi dell'anno (due cifre)
• Breve nome del mese - M
• Mese nome lungo - MM
• y - Anno (due cifre)
• aa - Anno (quattro cifre)
• @ - Timestamp Unix (ms dal 01/01/1970)
• ! - Finestre Watch (100ns dal 01/01/0001)
• '...' - Testo
• '' - I singoli apici
• Altro - Testo

Alcune eccezioni possono essere gettati:

• "argomenti non valido '- o se il formato è nullo è gettato Questa eccezione.
• 'Numero mancante nella posizione nn' - se il formato per visualizzare un valore non trovato Questo viene generata un'eccezione.
• 'Nome sconosciuto alla posizione nn' - se il formato non viene trovato un settimane o nomi dei mesi alcuni nomi è gettato Questa eccezione.
• 'Imprevisto letterale alla posizione nn' - se il valore di un formato di testo non trovato Questo viene generata un'eccezione.
• 'Data non valida' - la data non è valida se è gettato questa eccezione, come ad esempio la data del 31 / 02/2007 '.

Estrarre una data in formato ISO.

$ .datepicker.parseDate ( "AA-MM-dd", "2007-01-26");

Estrazione un formato di data che l'esteso francese.

$ .datepicker.parseDate ( "DD, MM D, aa", "Samedi, Juillet 14 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "fr"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "fr"] .monthNames
});

$ .datepicker.iso8601Week (Data)

Determinare una certa data delle prime settimane dell'anno: 1-53.

Questa funzione utilizza la definizione ISO 8601 di una settimana: una settimana a partire il Lunedi, la prima settimana di ogni anno, contiene 4 gennaio. Ciò significa che l'anno precedente può includere fino a tre giorni nella prima settimana dell'anno, l'anno può contenere fino a tre giorni nell'ultima settimana dell'anno precedente.

Questa funzione è calculateWeek implementazione di default.

Trova la data delle prime settimane dell'anno.

$ .datepicker.iso8601Week (New Data (2007, 1 - 1, 26));

$ .datepicker.noWeekends

Impostazione tale funzione beforeShowDay, impedendo la selezione del fine settimana.

Siamo in grado di beforeShowDay fornire opzioni noWeekends() funzione viene utilizzata per calcolare tutti lavorando per fornire un true / false array di valori utilizzati per indicare la data è selezionabile.

Impostare DatePicker, lasciate fine settimana facoltativi.

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

limite

Selezione data prevista per soddisfare diverse lingue e formati di data supportati da contenuti localizzati. Ogni codice lingua localizzata contenuto nel aggiunto dopo il nome del file, per esempio, il francese è jquery.ui.datepicker-fr.js . file di localizzazione necessari devono essere inclusi nella parte posteriore del codice selettore di data principale. Ogni file localizzati da aggiungere alla propria serie di set di localizzazione a disposizione, tutte le istanze si applicano automaticamente queste impostazioni per le impostazioni di default.

$.datepicker.regional Proprietà contiene una serie di localizzato al codice della lingua come un pre, pre-default è "" , espresso in inglese. Ogni voce è un oggetto con le seguenti proprietà: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear e yearSuffix .

È possibile ripristinare il codice di localizzazione predefinito di seguito:

È possibile ignorare il selettore data per una posizione specifica, seguendo i codici:

tematizzazione

membro selezione data (Datepicker Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare la data di stile specificato selettore, è possibile utilizzare il seguente nome della classe CSS:

• ui-datepicker : selezione data contenitore esterno. Se il selettore data è in linea, gli elementi sono inoltre dotato di un ui-datepicker-inline , di classe. Se le isRTL opzioni, questo elemento sarà inoltre con un ui-datepicker-rtl , di classe.
  • ui-datepicker-header : contenitore testa selezione data.
    • ui-datepicker-prev : controllo viene utilizzato per selezionare il mese precedente.
    • ui-datepicker-next : controllo viene utilizzato per selezionare il mese successivo.
    • ui-datepicker-title : titolo data picker contiene il mese e l'anno di contenitore.
      • ui-datepicker-month : mese visualizzazione del testo, se si imposta changeMonth l'opzione <select> elemento.
      • ui-datepicker-year : Il testo sul display, se si imposta changeYear l'opzione <select> elemento.
  • ui-datepicker-calendar : contenere il modulo calendario.
    • ui-datepicker-week-end : le cellule del fine settimana. : Le celle che contengono giorni del fine settimana.
    • ui-datepicker-other-month : posto in un mese, ma non il mese corrente il numero di giorni le cellule.
    • ui-datepicker-unselectable : l'utente non può selezionare la cella.
    • ui-datepicker-current-day : selezionato cella della data.
    • ui-datepicker-today : cellule data odierna.
  • ui-datepicker-buttonpane : Quando si imposta showButtonPanel utilizzano la pulsantiera (buttonpane) quando l'opzione.
    • ui-datepicker-current : selezionare il pulsante per la data odierna.

Se numberOfMonths opzione per visualizzare più mesi, usare un po 'di classe in più:

• ui-datepicker-multi : mese parti data raccoglitrice dello strato più esterno del contenitore. Questo elemento verrà visualizzato in base al numero del mese con l'aggiunta di ui-datepicker-multi-2 , ui-datepicker-multi-3 o ui-datepicker-multi-4 , nome della classe.
  • ui-datepicker-group : raggruppamento all'interno di un unico selettore. Questo elemento in base alla sua posizione nel pacchetto con ulteriore ui-datepicker-group-first , ui-datepicker-group-middle o ui-datepicker-group-last , nome della classe.

fare affidamento

• nucleo UI (UI Core)
• Effetti core (Effetti Core) (facoltativo, quando e showAnim quando viene utilizzato con le opzioni)

Ulteriori informazioni

• La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.
• I componenti da manipolare programmazione il valore dell'elemento, in modo che quando il valore delle modifiche elemento non innescare nativi change eventi.
• Non supporta <input type="date"> Crea una raccoglitrice di data, perché causerà un conflitto con il selettore di interfaccia utente locale.

Esempi

Un semplice jQuery UI selezione data (Datepicker).

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro selezione data (Datepicker Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "datepicker"> </ div>
 
<Script>
$ ( "#datepicker") .datepicker ();
</ Script>
 
</ Corpo>
</ Html>

Visualizza demo