Impostare un intervallo dinamico di date con jQuery UI Datapicker

Guida avanzata all'uso di jQuery UI Datapicker

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!

Lascia la tua opinione

1 comment

  • 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.

×