Calendario in italiano completo

 JQuery  No Responses »
Dec 272011
 

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

 Share

Creare un calendario da a (date range)

 JQuery  No Responses »
Dec 272011
 

Per creare una selezione di un periodo di date senza impazzire con i vari controlli un’ottima soluzione è ricorrere a jQuery UI, avremo a disposizione un calendario e tutti gli strumenti che ci servono.

Per prima cosa serve include il core di jQuery (direttamente dalla CDN di google):


<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js”></script>

Poi jquery UI:


<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>

e, se necessario, la localizzazione in italiano (questa formatterà anche di default la data anche se poi lo potremo modificare):


<script type=”text/javascript” src=”js/jquery.ui.datepicker-it.js”></script>

Infine usiamo un tema fra quelli disponibili:


<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css” />

Nell’html della pagina la parte che ci interessa è composta semplicemente da due campi di input:


<input type=”text” id=”da” name=”da” />
<input type=”text” id=”a” name=”a” />

A questo punto bisogna “solo” trasformarli in controlli datepicker sncronizzati al caricamento della pagina:


$().ready(function(){
var dates1 = $( “#da, #a” ).datepicker({
defaultDate: “+1w”,
numberOfMonths: 1,
yearRange: ’1990:2011′,
onSelect: function( selectedDate ) {
var option = this.id == “da” ? “minDate” : “maxDate”,
instance = $( this ).data( “datepicker” ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates1.not( this ).datepicker( “option”, option, date );
}
});
})

dove $().datepicker() per mette di trasformare appunto in datepicker i due input con id “a” e “da”;

infine all’evento select della prima data prepariamo il secondo datepicker disabilitando le date non selezionabili (perché precedenti).

Per provare l’esempio completo portare il focus nei due campi di input.

Share