Calendar / Datepicker Widget

Standard 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>