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.

Sorry, the comment form is closed at this time.