jQuery datepicker dinamici

Uno dei widget più popolari di jQuery UI è l’utilissimo datepicker.
Questo fornisce un calendario in forma tabellare, utilizzabile stand alone oppure associato ad un campo di testo.
L’utilità è indiscussa: se si accetta l’input dell’utente è spesso necessario un lungo lavoro di verifica dei dati, per essere certi che i dati siano stati inseriti nel formato richiesto.
Che si effettui il controllo lato client, quindi via JS, oppure lato server, la logica non cambia. Di qui la necessità di elementi che agevolino l’input dell’utente e riducano le possibilità di errore.

Va detto che l’evoluzione delle tecnologie web aiuta lo sviluppatore. HTML 5, infatti offre diversi nuovi elementi di form, tra cui l’elemento date. Purtroppo, però, lo sviluppo delle nuove tecnologie sembra essere abbastanza tortuoso e non pienamente condiviso. Fino ad ora, infatti, il nuovo elemento ha ottenuto uno scarso supporto da parte dei maggiori browser.

Il campo date di html5 in Opera Browser

Dunque è meglio andare sul sicuro e ricorrere a strumenti collaudati come le più che solide librerie jQuery e jQuery UI.

Inserire un datepicker in un’applicazione o pagina web è di una semplicità disarmante:

$.ready(function($){
  $('#event_date').datepicker({
    dateFormat: 'yy-mm-dd',
    constrainInput: true,
    gotoCurrent: true,
    showAnim: 'slideDown'
  });
});

Ovviamente, #event_date è l’ID del campo di testo.

Può succedere che, invece di un unico campo destinato alla data, si abbia la necessità di due campi, uno per la data iniziale di un evento, l’altro per la data finale. Un errore possibile di input potrebbe essere quello dell’inserimento di una data iniziale successiva alla data finale. Come risolvere il problema senza dover costringere l’utente a riacquisire i dati in caso di errore?

Il datepicker permette di selezionare le date all’interno di un determinato intervallo di tempo. Ciò significa che si possono impostare una data iniziale e una data finale. Le date esterne all’intervallo non saranno selezionabili da parte dell’utente.

Allora supponiamo di avere due campi data, uno per la data iniziale dell’intervallo, input#start_date, uno per la data finale, input#end_date. Selezionati i due input, basterà attivare il datepicker su entrambi e definire una funzione di callback da eseguire all’evento beforeShow:

$.ready(function($){
  $('#start_date, #end_date').datepicker({
    dateFormat: 'yy-mm-dd',
    constrainInput: true,
    gotoCurrent: true,
    beforeShow: customRange,
    showAnim: 'slideDown'
  });
});

function customRange( input ){
  return {
    minDate: ( input.id == 'end_date' ? jQuery('#start_date').datepicker('getDate') : null ),
    maxDate: ( input.id == 'start_date' ? jQuery('#end_date').datepicker('getDate') : null )
  }
}

L’argomento della callback è rappresentato dall’istanza del campo di testo. Cosa succede?

Supponiamo che l’utente abbia selezionato la data 2012-01-03 come data iniziale dell’evento: in pratica ha assegnato un valore al primo campo #start_date. Ora dovrà assegnare un valore al secondo campo. Quando l’utente seleziona il secondo input, quello con ID = end_date, la nostra callback imposta il valore dell’opzione minDate. Questa opzione stabilisce la prima data selezionabile (le date precedenti saranno disabilitate).
Allo stesso modo, quando l’utente seleziona il primo input, la callback imposta maxDate, ossia l’opzione che stabilisce l’ultima data selezionabile.

In questo modo la data iniziale non potrà mai essere successiva alla data finale dell’evento.

Le date precedenti la data iniziale sono disabilitate nel secondo datepicker

Annunci

One thought on “jQuery datepicker dinamici

I commenti sono chiusi.