Vediamo come impostare un intervallo dinamico di date con jQuery UI Datapicker utile se volete “guidare” i vostri visitatori alla scelta delle date.
Nell’articolo di oggi vi spiegherò come migliorare drasticamente la user experience delle vostre classiche select di Selezione arrivo e partenze. Se fate questo lavoro vi sarà capitato molto spesso di dover impostare qualcosa di questo tipo:
<input type="text" name="arrivo" id="arrivo" class="datepicker"> <input type="text" name="partenza" id="partenza" class="datepicker">
Dove l’utente seleziona il periodo di arrivo e di partenza nella sua prenotazione e/o richiesta di informazioni. Per far apparire la comodissima “select” di selezione del giorno esistono svariati plugin differenti, il più famoso è sicuramente jQuery UI. Se non lo conoscete vi consiglio di dare uno sguardo alla documentazione ufficiale.
Ma andiamo con ordine. Il problema principale di questo tipo di selezione date è che – una volta impostata la data di arrivo – l’utente, cliccando sulla data di partenza per impostarla, vede di fatto anche i giorni PRECEDENTI alla data di arrivo. Questo può creare confusione e/o possibilità di incorrere in errori del tipo data partenza precedente a quella di arrivo. Per “teleguidare” i nostri visitatori e possibili clienti basta davvero poco. Vi spiego come in pochi semplici passi.
a) Per prima cosa impostiamo un action al change della prima select (ovvero quella di arrivo)
b) “Catturiamo” la data selezionata dall’utente
c) Resettiamo il campo della data di partenza
d) Re-inizializziamo il datapicker in modo tale da impostare il range appropriato a partire dalla data selezionata in precedenza sul campo data-arrivo.
Ecco come si traduce il tutto in jQuery:
$(document).ready(function() {
$("#arrivo").change(function(){
//Data selezionata
var currentDate = $(this).datepicker( "getDate" );
$("#partenza").datepicker( "destroy" ); //distruggo
$("#partenza").datepicker({ minDate: currentDate, maxDate: "", dateFormat: "dd/mm/yy" });//reinizializzo con range data
});//CHANGE
});//DOM
Come vedete, una volta selezionata la prima data di arrivo, nella data di partenza apparirà solo il range di date a partire dalla data selezionata in avanti. Le date precedenti alla data di arrivo saranno disabilitate. Per il codice che vedete ho utilizzato alcune funzionalità di jQuery UI in particolare:
- datapicker(“getDate”) : restituisce la data selezionata nel datapicker.
- datapicker(“destroy”): elimina il datapicker
- minDate / maxDate : imposta un range di date
- dateFormat: imposta il formato data italiano.
A questo indirizzo troverete molte altre funzionalità utili.
Se questo articolo ti è stato utile condividilo sui tuoi social network preferiti o fammi sapere cosa ne pensi nei commenti!
Ciao Riccardo
inizio facendoti i miei migliori complimenti per questa iniziativa editoriale. La seguo da molti anni e quando ho bisogno di comprendere, approfondire o ideare script sei sempre il mio punto di partenza.
Detto questo, vorrei sapere come acquisire la selezione del range da php.
Grazie.
Buon lavoro.
Ragazzi, bisogna stare attenti a quello che si scrive, quando si scrive un articolo di informatica, non divulgativo in italiano corrente su un qualunque altro argomento!
Mi spiego meglio: se si chiama datepicker (date=data in inglese), NON può diventare datapicker (data=dato in inglese), altrimenti poi non si capisce più niente. Questa ambivalenza di nomenclatura rende il terreno particolarmente insidioso!
O sbaglio? Si rischia così di vanificare per una lettera sbagliata un articolo altrimenti utile, come molti altri del sig. Mel per altro!!