JqueryUI - Datepicker

Option - altField

Questa opzione specifica un selettore jQuery per un campo che viene aggiornato anche con qualsiasi selezione di data. L' opzione altFormat può essere utilizzata per impostare il formato per questo valore. Questo è abbastanza utile per impostare i valori della data in un elemento di input nascosto da inviare al server, mentre mostra un formato più user-friendly per l'utente. Per impostazione predefinita, il suo valore è"".

Syntax

$(".selector").datepicker(
   { altField: "#actualDate" }
);

Option - altFormat

Questa opzione viene utilizzata quando viene specificata un'opzione altField . Fornisce il formato per il valore da scrivere nell'elemento alternativo. Per impostazione predefinita, il suo valore è"".

Syntax

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);

Option - appendText

Questa opzione è un valore String da inserire dopo l'elemento <input>, destinato a mostrare le istruzioni all'utente. Per impostazione predefinita, il suo valore è"".

Syntax

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);

Option - autoSize

Questa opzione se impostata su true ridimensiona l'elemento <input> per adattare il formato della data del datepicker come impostato con l'opzione dateFormat. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { autoSize: true }
);

Option - beforeShow

Questa opzione è una funzione di callback che viene richiamata appena prima della visualizzazione di un datepicker, con l'elemento <input> e l'istanza datepicker passati come parametri. Questa funzione può restituire un hash delle opzioni utilizzato per modificare il datepicker. Per impostazione predefinita, il suo valore è"".

Option - beforeShowDay

Questa opzione è una funzione di callback che accetta una data come parametro, che viene richiamata per ogni giorno nel datepicker appena prima di essere visualizzato, con la data passata come unico parametro. Può essere utilizzato per sovrascrivere alcuni dei comportamenti predefiniti degli elementi del giorno. Questa funzione deve restituire una matrice di tre elementi, come segue:

• [0] - true per rendere la data selezionabile, false in caso contrario.

• [1]: una stringa delimitata da spazi di nomi di classi CSS da applicare o una stringa vuota per non applicarne nessuno

• [2]: una stringa facoltativa per applicare un suggerimento all'elemento giorno

Per impostazione predefinita, il suo valore è null.

Option - buttonImage

Questa opzione specifica il percorso di un'immagine da visualizzare sul pulsante abilitato impostando l' opzione showOn su uno dei pulsanti o su entrambi. Se viene fornito anche buttonText , il testo del pulsante diventa l' attributo alt del pulsante. Per impostazione predefinita, il suo valore è"".

Syntax

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);

Option - buttonImageOnly

Questa opzione, se impostata su true , specifica che l'immagine specificata da buttonImage deve apparire autonoma (non su un pulsante). L'opzione showOn deve essere ancora impostata su uno dei pulsanti o su entrambi affinché l'immagine venga visualizzata. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { buttonImageOnly: true }
);

Option - buttonText

Questa opzione specifica la didascalia per il pulsante abilitato impostando l' opzione showOn su uno dei pulsanti o su entrambi . Per impostazione predefinita, il suo valore è"...".

Syntax

$(".selector").datepicker(
   { buttonText: "Choose" }
);

Option - calculateWeek

Questa opzione è una funzione personalizzata per calcolare e restituire il numero della settimana per una data passata come parametro solitario. L'implementazione predefinita è quella fornita dalla funzione di utilità $ .datepicker.iso8601Week () .

Syntax

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);

Option - changeMonth

Se questa opzione è impostata su true , viene visualizzato un menu a discesa del mese, che consente all'utente di modificare direttamente il mese senza utilizzare i pulsanti freccia per spostarsi tra di essi. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { changeMonth: true }
);

Option - changeYear

Se questa opzione è impostata su true , viene visualizzato un menu a discesa dell'anno, che consente all'utente di modificare direttamente l'anno senza utilizzare i pulsanti freccia per spostarsi tra di loro. L'opzione yearRange può essere utilizzata per controllare quali anni sono resi disponibili per la selezione. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { changeYear: true }
);

Option - closeText

Questa opzione specifica il testo per sostituire la didascalia predefinita di Fine per il pulsante di chiusura. Viene utilizzato quando il pannello dei pulsanti viene visualizzato tramite l' opzione showButtonPanel . Per impostazione predefinita, il suo valore è"Done".

Syntax

$(".selector").datepicker(
   { closeText: "Close" }
);

Option - constrainInput

Questa opzione se impostata su true (impostazione predefinita), l'immissione di testo nell'elemento <input> è limitata ai caratteri consentiti dall'opzione dateformat corrente . Per impostazione predefinita, il suo valore ètrue.

Syntax

$(".selector").datepicker(
   { constrainInput: false }
);

Option - currentText

Questa opzione specifica il testo per sostituire la didascalia predefinita di Oggi per il pulsante corrente. Viene utilizzato se il pannello dei pulsanti viene visualizzato tramite l' opzione showButtonPanel . Per impostazione predefinita, il suo valore èToday.

Syntax

$(".selector").datepicker(
   { currentText: "Now" }
);

Option - dateFormat

Questa opzione specifica il formato della data da utilizzare. Per impostazione predefinita, il suo valore èmm/dd/yy.

Syntax

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);

Option - dayNames

Questa opzione è una matrice di 7 elementi che fornisce i nomi dei giorni completi con l'elemento 0 che rappresenta la domenica. Può essere utilizzato per localizzare il controllo. Per impostazione predefinita, il suo valore è[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].

Syntax

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);

Option - dayNamesMin

Questa opzione è un array di 7 elementi che fornisce i nomi minimi dei giorni con l'elemento 0 che rappresenta la domenica, utilizzato come intestazioni di colonna. Può essere utilizzato per localizzare il controllo. Per impostazione predefinita, il suo valore è[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ].

Syntax

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);

Option - dayNamesShort

Questa opzione specifica un array di 7 elementi che fornisce i nomi dei giorni brevi con l'elemento 0 che rappresenta la domenica. Può essere utilizzato per localizzare il controllo. Per impostazione predefinita, il suo valore è[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].

Syntax

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);

Option - defaultDate

Questa opzione imposta la data iniziale per il controllo, sovrascrivendo il valore predefinito di oggi, se l'elemento <input> non ha valore. Può essere un'istanza di Date , il numero di giorni da oggi o una stringa che specifica una data assoluta o relativa. Per impostazione predefinita, il suo valore ènull.

Syntax

$(".selector").datepicker(
   { defaultDate: +7 }
);

Option - duration

Questa opzione specifica la velocità dell'animazione che fa apparire il datepicker. Può essere lento, normale o veloce o il numero di millisecondi per l'estensione dell'animazione. Per impostazione predefinita, il suo valore ènormal.

Syntax

$(".selector").datepicker(
   { duration: "slow" }
);

Option - firstDay

Questa opzione specifica quale giorno è considerato il primo giorno della settimana e verrà visualizzato come la colonna più a sinistra. Per impostazione predefinita, il suo valore è0.

Syntax

$(".selector").datepicker(
   { firstDay: 1 }
);

Option - gotoCurrent

Questa opzione se impostata su true , il collegamento del giorno corrente viene impostato sulla data selezionata, ignorando l'impostazione predefinita di oggi. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { gotoCurrent: true }
);

Option - hideIfNoPrevNext

Questa opzione, se impostata su true , nasconde i collegamenti successivo e precedente (invece di disabilitarli semplicemente) quando non sono applicabili, come determinato dalle impostazioni delle opzioni minDate e maxDate . Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);

Option - isRTL

Questa opzione, se impostata su true , specifica le localizzazioni come lingua da destra a sinistra. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { isRTL: true }
);

Option - maxDate

Questa opzione imposta la data massima selezionabile per il controllo. Può essere un'istanza di Date, il numero di giorni da oggi o una stringa che specifica una data assoluta o relativa. Per impostazione predefinita, il suo valore ènull.

Syntax

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);

Option - minDate

Questa opzione imposta la data minima selezionabile per il controllo. Può essere un'istanza di Date , il numero di giorni da oggi o una stringa che specifica una data assoluta o relativa. Per impostazione predefinita, il suo valore ènull.

Syntax

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);

Option - monthNames

Questa opzione è un array di 12 elementi che fornisce i nomi completi dei mesi con lo 0 ° elemento che rappresenta gennaio. Può essere utilizzato per localizzare il controllo. Per impostazione predefinita, il suo valore è[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].

Syntax

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);

Option - monthNamesShort

Questa opzione specifica una matrice di 12 elementi che fornisce i nomi dei mesi brevi con l'elemento 0 che rappresenta gennaio. Può essere utilizzato per localizzare il controllo. Per impostazione predefinita, il suo valore è[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].

Syntax

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);

Option - navigationAsDateFormat

Questa opzione, se impostata su true , i collegamenti di navigazione per nextText, prevText e currentText vengono passati attraverso la funzione $ .datepicker.formatDate () prima della visualizzazione. Ciò consente di fornire formati di data per quelle opzioni che vengono sostituite con i valori pertinenti. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);

Option - nextText

Questa opzione specifica il testo per sostituire la didascalia predefinita di Avanti per il collegamento di navigazione del mese successivo. ThemeRoller sostituisce questo testo con un'icona. Per impostazione predefinita, il suo valore èNext.

Syntax

$(".selector").datepicker(
   {  nextText: "Later" }
);

Option - numberOfMonths

Questa opzione specifica il numero di mesi da mostrare nel datepicker. Per impostazione predefinita, il suo valore è1. Tipi multipli supportati -

• Number - Il numero di mesi da visualizzare in una singola riga.

• Array - Un array che definisce il numero di righe e colonne da visualizzare.

Syntax

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);

Option - onChangeMonthYear

Questa opzione è una richiamata che viene richiamata quando il datepicker si sposta su un nuovo mese o anno, con l'anno, il mese (in base 1) e l'istanza datepicker selezionati passati come parametri e il contesto della funzione è impostato sull'elemento del campo di input. Per impostazione predefinita, il suo valore ènull.

Option - onClose

Questa opzione è una richiamata invocata ogni volta che un datepicker viene chiuso, ha passato la data selezionata come testo (la stringa vuota se non c'è selezione) e l'istanza del datepicker e il contesto della funzione è impostato sull'elemento del campo di input. Per impostazione predefinita, il suo valore ènull.

Option - onSelect

Questa opzione è una richiamata invocata ogni volta che viene selezionata una data, la data selezionata viene passata come testo (la stringa vuota se non è presente alcuna selezione) e l'istanza di datepicker e il contesto della funzione è impostato sull'elemento del campo di input. Per impostazione predefinita, il suo valore ènull.

Option - prevText

Questa opzione specifica il testo per sostituire la didascalia predefinita di Prec per il collegamento di navigazione del mese precedente. (Nota che ThemeRoller sostituisce questo testo con un'icona). Per impostazione predefinita, il suo valore èPrev.

Syntax

$(".selector").datepicker(
   { prevText: "Earlier" }
);

Option - selectOtherMonths

Questa opzione, se impostata su true , è possibile selezionare i giorni mostrati prima o dopo i mesi visualizzati. Tali giorni non vengono visualizzati a meno che l' opzione showOtherMonths non sia vera. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { selectOtherMonths: true }
);

Option - shortYearCutoff

Questa opzione, se è un numero, specifica un valore compreso tra 0 e 99 anni prima del quale qualsiasi valore di 2 cifre dell'anno sarà considerato appartenere al secolo precedente. Se questa opzione è una stringa, il valore subisce una conversione numerica e viene aggiunto all'anno corrente. L'impostazione predefinita è+10 che rappresenta 10 anni dall'anno in corso.

Syntax

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);

Option - showAnim

Questa opzione specifica imposta il nome dell'animazione da utilizzare per mostrare e nascondere il datepicker. Se specificato, deve essere uno tra show (impostazione predefinita), fadeIn, slideDown o una qualsiasi delle animazioni mostra / nascondi dell'interfaccia utente jQuery. Per impostazione predefinita, il suo valore èshow.

Syntax

$(".selector").datepicker(
   { showAnim: "fold" }
);

Option - showButtonPanel

Questa opzione, se impostata su true , viene visualizzato un pannello di pulsanti nella parte inferiore del datepicker, contenente i pulsanti corrente e di chiusura. La didascalia di questi pulsanti può essere fornita tramite i currentText e closetext opzioni. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { showButtonPanel: true }
);

Option - showCurrentAtPos

Questa opzione specifica l'indice a base 0, a partire dall'angolo in alto a sinistra, in cui il mese contenente la data corrente deve essere posizionato all'interno di una visualizzazione di più mesi. Per impostazione predefinita, il suo valore è0.

Syntax

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);

Option - showMonthAfterYear

Questa opzione specifica se impostata su true , le posizioni del mese e dell'anno vengono invertite nell'intestazione del datepicker. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { showMonthAfterYear: true }
);

Option - showOn

Questa opzione specifica quando deve apparire il datepicker. I valori possibili sono focus, button o entrambi . Per impostazione predefinita, il suo valore èfocus.

focus (impostazione predefinita) fa sì che il datepicker venga visualizzato quando l'elemento <input> ottiene il focus.

button fa sì che un pulsante venga creato dopo l'elemento <input> (ma prima di qualsiasi testo aggiunto) che attiva il datepicker quando viene cliccato.

entrambi fanno sì che il pulsante di attivazione venga creato e che gli eventi di attivazione attivino anche il selettore di date.

Syntax

$(".selector").datepicker(
   { showOn: "both" }
);

Option - showOptions

Questa opzione fornisce un hash da passare all'animazione quando viene specificata un'animazione dell'interfaccia utente jQuery per l' opzione showAnim . Per impostazione predefinita, il suo valore è{}.

Syntax

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);

Option - showOtherMonths

Questa opzione se impostata su true , vengono visualizzate le date prima o dopo il primo e l'ultimo giorno del mese corrente. Queste date non sono selezionabili a meno che anche l'opzione selectOtherMonths non sia impostata su true. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { showOtherMonths: true }
);

Option - showWeek

Questa opzione, se impostata su true , il numero della settimana viene visualizzato in una colonna a sinistra della visualizzazione del mese. L'opzione CalcolaSettimana può essere utilizzata per modificare il modo in cui viene determinato questo valore. Per impostazione predefinita, il suo valore èfalse.

Syntax

$(".selector").datepicker(
   { showWeek: true }
);

Option - stepMonths

Questa opzione specifica il numero di mesi da spostare quando si fa clic su uno dei controlli di navigazione del mese. Per impostazione predefinita, il suo valore è1.

Syntax

$(".selector").datepicker(
   { stepMonths: 3 }
);

Option - weekHeader

Questa opzione specifica il testo da visualizzare per la colonna del numero della settimana, sovrascrivendo il valore predefinito di Wk, quando showWeek è vero. Per impostazione predefinita, il suo valore èWk.

Syntax

$(".selector").datepicker(
   { weekHeader: "W" }
);

Option - yearRange

Questa opzione specifica i limiti in base ai quali gli anni vengono visualizzati nel menu a discesa nel modulo da: a quando changeYear è vero . I valori possono essere assoluti o relativi (ad esempio: 2005: +2, per il 2005 fino a 2 anni da adesso). Il prefisso c può essere utilizzato per compensare i valori relativi rispetto all'anno selezionato anziché all'anno corrente (esempio: c-2: c + 3). Per impostazione predefinita, il suo valore èc-10:c+10.

Syntax

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);

Option - yearSuffix

Questa opzione visualizza testo aggiuntivo dopo l'anno nell'intestazione del datepicker. Per impostazione predefinita, il suo valore è"".

Syntax

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

Action - destroy()

Questa azione rimuove completamente la funzionalità datepicker. Ciò riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Syntax

$(".selector").datepicker("destroy");

Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

Questa azione visualizza il datepicker in una finestra di dialogo dell'interfaccia utente di jQuery. Dove -

• data è la data iniziale.

• onSelect è una funzione di callback quando viene selezionata una data. La funzione riceve il testo della data e l'istanza di selezione della data come parametri.

• impostazioni sono le nuove impostazioni per il selettore di data.

• pos è la posizione della parte superiore / sinistra della finestra di dialogo come [x, y] o un MouseEvent che contiene le coordinate. Se non specificato, la finestra di dialogo è centrata sullo schermo.

Syntax

$(".selector").datepicker( "dialog", "10/12/2012" );

Action - getDate()

Questa azione restituisce la data corrispondente alla data selezionata. Questo metodo non accetta argomenti.

Syntax

$(".selector").datepicker("getDate");

Action - hide()

Questa azione chiude il selettore di date aperto in precedenza. Questo metodo non accetta argomenti.

Syntax

$(".selector").datepicker("hide");

Action - isDisabled()

Questa azione controlla se la funzionalità di selezione della data è disabilitata. Questo metodo non accetta argomenti.

Syntax

$(".selector").datepicker("isDisabled");

Action - option( optionName )

Questa azione recupera il valore attualmente associato all'opzione optionName specificato .

Syntax

$(".selector").datepicker( "option", "disabled");

Action - option()

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del datepicker corrente. Questo metodo non accetta argomenti.

Syntax

var options = $( ".selector" ).datepicker( "option" );

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione datepicker associata a optionName specificato.

Syntax

$(".selector").datepicker( "option", "disabled", true );

Action - option( options )

Questa azione imposta una o più opzioni per il datepicker.

Syntax

$(".selector").datepicker("option", { disabled: true });

Action - refresh()

Questa azione ridisegna il selettore di date, dopo aver apportato alcune modifiche esterne. Questo metodo non accetta argomenti.

Syntax

$(".selector").datepicker("refresh");

Action - setDate()

Questa azione imposta la data specificata come data corrente del datepicker.

Syntax

$(".selector").datepicker("setDate", "10/12/2012");

Action - show()

Questa azione apre il selettore di date. Se il datepicker è allegato a un input, l'input deve essere visibile affinché il datepicker venga mostrato. Questo metodo non accetta argomenti.

Syntax

$(".selector").datepicker("show");

Action - widget()

Questa azione restituisce un oggetto jQuery contenente il datepicker.

Syntax

$(".selector").datepicker("widget");