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.
Google+
Sorry, the comment form is closed at this time.