Calendario in italiano completo

Spesso dobbiamo inserire delle date usando un calendario, ma molte volte abbiamo dei piccoli fastidiosi problemi legati alla durata o alla comodità di selezione delle date.

Costruiremo un calendario in italiano che vada a risolvere alcuni di questi problemi.

Per prima cosa colleghiamo jquery, jqueryUI, un tema e la traduzione dei mesi e dei giorni attingendo dai repository di google, ovviamente, volendo, tutti questi files possono essere scaricati in locale sul proprio server web:

<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css” />
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js”></script>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.datepicker-it.js”></script>

Nella nostra pagina inseriremo un frammento di form con un campo di input:

<label for=”data”>Data:</label>
<input type=”text” id=”data” name=”data” />

Quindi al caricamento della pagina andreamo a mappare sul nostro controllo html la trasformazione in calendario:

$().ready(function(){
var dates1 = $( “#data” ).datepicker({

});
})

A questo punto avendo già agganciato la traduzione italiana le date saranno automaticamente nel formato giorno-mese-anno, abilitiamo le opzioni per modificare velocemente mese e anno senza dver necessariamente scorrere di mese in mese:

changeMonth:true,
changeYear:true,

e infine rendiamo dinamico lo scorrere del range degli anni: per fare questo partiremo dall’anno in corso e calcoleremeo i limiti prima e dopo:

var oggi=new Date();
var anno=oggi.getFullYear();
var da=parseInt(anno-5);
var a=parseInt(anno+2);

infine l’ultima proprietà sarà dunque l’yearRange:

yearRange: da+’:'+a

L’esempio