Calendar / Datepicker Widget
Genera un calendario sfogliabile con date selezionabili ed utilizabile anche come datepicker
// API dBJs-uiStandard sintax
<span class="calendar" data-cFormat="d-m-Y | Y-m-d" data-cAutoLoad="on |off"> <input type="text" class="datepicker" /> </span>
Questo widget della libreria dBJs-ui possiede la proprietà data-cAutoLoad che permette di scegliere se deve essere instanziato in automatico (default on) all'onload del documento o se deve essere instanziato manualmente con la seguente sintassi (impostando il data ad off):
new Calendar({ el: document.getElementById('myId'), month: new Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'), days: new Array('D','L','M','M','G','V','S'), format: 'd-m-Y' });
Decidendo di non istanziarlo automaticamente è possibile impostare dei settaggi
passando come proprietà dell'istanza un oggetto avente obbligatoriamente come
proprietà el, un riferimento all'oggetto del DOM
al quale si è data la classe calendar, e avente altre proprietà
facoltative come ad esempio le stringhe per i mesi dell'anno e dei giorni della settimana,
che altrimenti sarebbero di default in inglese. I due Array
devono avere la sequenza dei mesi da Gennaio a Dicembre e la seguenza dei giorni
della settimana da Domenica a Sabato.
Inoltre è possibile passare il paramentro
format che permette la scelta di due formati di data visualizzabili
nell'input di testo (d-m-Y e Y-m-d), tale proprietà
può essere imposta anche con data-cFormat e ignorata nell'istanza;
qualora la si ignori in entrambe le possibilità il suo valore di default è
Y-m-d.
Anche l'input con classe datepicker è facoltativo, in quanto se viene inserito all'interno dell'elemento con classe calendar genererà un widget per la scelta di una data, altrimenti genererà un calendario direttamente visibile nel DOM.
<span class="calendar" data-cFormat="d-m-Y"> <input type="text" class="datepicker" /> </span>
In questo secondo esempio invece si vede come il widget piò essere usato anche solo da semplice calendario.
<span class="calendar"> </span>