Con lo script che presentiamo è possibile inserire nelle vostre pagine un calendario con popup da cui selezionare la data per la compilazione di un form. Come si potrà notare eseguendo l'esempio allegato, è una soluzione ideale in moduli in cui è necessario inserire una data di inizio e una finale: è spesso usata, infatti, per pagine di prenotazione di alberghi o viaggi aerei con andata e ritorno. Lo script è opera di Denis Gritcyuk ed è liberamente utilizzabile a patto di mantenere l'attribuzione all'autore all'inizio del codice.
Lo script si compone di una parte di codice contenuta nel file 'ts_picker.js', di un richiamo allo script esterno contenuto nella testata della pagina HTML e di un richiamo all'interno della pagina stessa.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione JavaScript del documento 'esempio.htm' contiene nella testata il collegamento allo script esterno:
<script language="javascript" src="ts_picker.js"></script>
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Il richiamo interno alla pagina Web è un modulo di immissione in cui l'utente è chiamato ad inserire due valori, uno per la data iniziale, l'altro per quella finale. Analizziamolo:
<form name="formData">
<p><strong>Data iniziale:</strong> <input type="Text" name="data1" value="">
<a href="javascript:show_calendar('document.formData.data1', document.formData.data1.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Seleziona la data"/></a></p>
<p><strong>Data finale:</strong> <input type="Text" name="data2" value="">
<a href="javascript:show_calendar('document.formData.data2', document.formData.data2.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Seleziona la data"/></a></p>
</form>
Il form è denominato 'formDatà. Al suo interno viene inserito un primo campo di testo con nome 'data1' e con valore vuoto ('value=""'). Segue una piccola icona che rappresenta un mini-calendario. È racchiusa in un link che al click dell'utente aprirà la finestra popup con il calendario. L'istruzione che ci interessa è quella racchiusa all'interno dell'attributo href:
href="javascript:show_calendar('document.formData.data1', document.formData.data1.value);"
</form>
Al click, viene eseguita la funzione 'show_calendar' contenuta nello script. Vengono passati come parametri l'indicazione del campo di testo (document.formData.data1) e un riferimento al suo valore (document.formData.data1.value). Si osservi come il primo parametro vada racchiuso tra apici singoli.
Il secondo campo di testo e il link al calendario che lo accompagna, è identico al primo. L'unico cambiamento riguarda il nome dell'input, che qui è 'data2':
href="javascript:show_calendar('document.formData.data2', document.formData.data2.value);"
## 3: LO SCRIPT 'TS_PICKER.JS'
Lo script vero e proprio è una lunga libreria in cui vengono definite le varie funzioni di formattazione della data e il passaggio di dati dalla popup alla pagina principale.
Grazie ai metodi di gestione della data di Javascript e alla possibilità di creare codice HTML, lo script crea automaticamente un calendario che parte dal mese corrente. Tramite le due icone poste in alto è possibile scorrere di mese in mese in avanti o indietro.
Il codice può essere lasciato intatto, dal momento che è stato modificato nella sua parte iniziale per adeguare le indicazioni di mesi e giorni alla lingua italiana.
Possibili interventi di personalizzazione possono essere effettuati nella parte di generazione del codice HTML al fine di modificare colori, sfondi e font del calendario.
