Questo script è una piccola utility che permette di inserire la data in un form in modo semplice, risparmiando anche il controllo della correttezza della data.
      Cliccando su un pulsante viene visualizzato un calendario sul quale si può scegliere la data cliccando sul giorno.
      Il calendario si presenta nella seguente maniera:


      Il giorno corrente viene visualizzato in grassetto e sottolineato. Con uno sfondo rosso sono visualizzate le festività cioè tutte le domeniche e le feste ufficiali italiane, compresa la pasquetta.
      Con i pulsanti "+" e "-" si passa al mese successivo o precedente. Con il pulsante "Default" si visualizza il mese iniziale (quello con si è aperto il calendario).
      Cliccando su uno dei giorni del calendario, questo viene chiuso e i campi del form vengono aggiornati con la data prescelta.
      Per chiudere il calendario senza scegliere nessuna data si deve cliccare sullo stesso pulsante con il quale è stato aperto.

      Come si usa
      La funzione principale dello script è showCalendar(), alla quale possono essere passati tre parametri:
       - la data iniziale che deve essere visualizzata dal calendario.Se si omette questo parametro viene visualizzato il calendario del mese corrente;
       - le coordinate (xPos, yPos) del punto in cui dovrà essere posizionato il calendario.

      Ad esempio:

       showCaledar(new Date(2002, 8, 12), 200, 150);
       showCaledar();

      Nel primo caso viene mostrato il calendario del mese di settembre 2002 e posizionato nel punto (200, 150); nel secondo caso viene visualizzato del mese corrente e posizionato in punto predefinito.
      Si faccia attenzione che non sarà possibile spostare il calendario dopo che è stato visualizzato.
      La data prescelta (il giorno, il mese e l'anno) viene passata alla funzione action(). Nello script vi è una funzione action di esempio, che potrà essere modificata se si hanno diverse esigenze.
      Lo script andrà inserito nella pagina HTML scrivendo nell'head:

       <script language="JavaScript">
       document.write('<script language="JavaScript" src="datax.js"></sc' + 'ript>');
       </script>

      Il pulsante che richiama il calendario potrà essere:

       <input type="button" name="pulsante" value="24-12-2002" onMouseDown="cal(this, event, 1)">

      cal() è una funzione di esempio che prepara i parametri che devono essere passati a showCalendar().
      In questo caso, il primo parametro è campo del form che contiene la data iniziale del calendario e che dovrà essere aggiornata successivamente.
      Il secondo parametro permette di leggere la posizione del mouse nel momento del click. Il calendario verrà posizionato in questo punto.
      Il terzo parametro rappresenta il "tipo" di campi che dovranno essere aggiornati. In questo caso vuol dire solo che vi è un solo campo che dovrà essere aggiornato.

      Questo pulsante si presenterà nella seguente maniera:

In maniera analoga si procede se si vuole un campo del tipo:

in cui premendo sul pulsantino "V" dovrà essere letta e aggiornata la data contenuta nel campo di testo. In questo caso il primo parametro della funzione cal() dovrà essere il campo di testo:

       <input type="button" name="pulsante" value="V" onMouseDown="cal(datacompleta, event, 1)">

Un terzo caso, più complicato, si ha quando il giorno, mese ed anno sono messi in tre campi di testo separati:

      I tre campi di testo dovranno essere passati tramite un array (primo parametro della funzione cal()), mentre il tipo (terzo parametro) avrà il valore 0:

       <input type="button" name="go" value="V" onMouseDown = "cal(new Array(giorno, mese, anno), event, 0)">

      dove giorno, mese e anno sono i nomi dei campi di testo.
      La funzione cal() predefinita è:

<script language="JavaScript">
// variabili globali che contengono i campi da aggiornare
var source; 
var tipo;
var campi = new Array();

function cal(val, e, t) { 
var dt = new Array();
xPos = (document.layers) ? e.pageX : ((document.all) ? event.x : e.clientX);
yPos = (document.layers) ? e.pageY : ((document.all) ? event.y : e.clientY);
tipo = t;
source = val;
if (t == 0) { 
dt[0] = val[0].value;
dt[1] = val[1].value;
dt[2] = val[2].value;

} else 
dt = val.value.split('-');

showCalendar(new Date(dt[2], dt[1] - 1, dt[0]), xPos, yPos);
}
</script>

La corrispondente funzione action() sarà

function action(g, m , a) { 
function format(x) { 
return x > 9 ? x : "0" + x;

}
getId().showIt(false);
if (tipo == 0) { 
source[0].value = format(g);
source[1].value = format(m + 1);
source[2].value = a; 
} else 
source.value = format(g) + '-' + format(m + 1) + '-' + a;
} 

---

Personalizzazioni

      L'aspetto del calendario potrà essere modificato nei colori, nei font e nella grandezza. Per i colori vi sono queste variabili globali:

var backtable = '#90C0FF';
var calendback = '#DDDDBB';
var lines = '#404040';
var bright = '#000000';
var festa = '#FD9139';

      dove:

backtable; è il colore dello sfondo del calendario 
calendback; è il colore dello sfondo delle celle che contengono i giorni
lines; è il colore dei giorni normali
bright; è il colore del giorno corrente
festa; è il colore dello sfondo delle celle che contengono un giorno festivo

      I font sono definiti tramite gli stili css.
      La grandezza del calendario è controllata dalle variabili xwidth e xheight. Si faccia attenzione a definire anche un'appropriata scelta delle dimensioni dei font, altrimenti le dimensioni definite da queste due variabili non potranno essere rispettate.

Note finali
      L'uso del calendario è free. Si richiede soltanto che mi venga comunicato tramite e-mail l'uso del mio script

---

      Per qualsiasi chiarimento sullo script mandate una e-mail a Maurizio

---