jQuery UI Datepicker

In alcune recenti applicazioni da me create ho voluto utilizzare un datepicker, un calendario che permette di selezionare date, ma è possibile configurarlo anche per selezionare insieme data e ora.

Vediamo una semplice applicazione che permette di configurare un datepicker.

HTML

Creiamo il solito container all’interno del quale piazziamo il calendario, con

<input type="text" id="datepicker" />

Creiamo inoltre un altro contenitore per un messaggio che contiene la data selezionata.

<div id="container">
<p id="p-date">Seleziona una data:
<input type="text" id="datepicker" />
</p>

<div id="mess">
</div>
</div>

CSS3

Dobbiamo aggiungere al CSS della nostra pagina il link all’interfaccia del calendario per fare in modo che sia disponibile un’interfaccia minima con cui interagire, e non solo lo scheletro. Il link che utilizzo è

//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

.
Qualche riga per conferire un certo aspetto alla pagina:

#container {
  text-align: center;
  margin: 10px;
  margin-top: 80px;
}

 

Javascript/jQuery

Ora la parte divertente: definiamo il comportamento del calendario. Nella pagina della documenti API del datepicker si trovano vari spunti interessanti. Il nostro datepicker dovrà avere una data minima e una data massima, il formato della data dovrà essere il formato in uso in Italia, il classico GG/MM/AAAA, e dovrà darci la possibilità di selezionare da un menù a tendina sia il mese che l’anno.

console.clear();

$(document).ready(function() {

  // setter per datepicker
  $(&quot;#datepicker&quot;).datepicker();

}) // fine funzione (document).ready

Ecco i requisiti minimi del nostro calendario. Ma come già accennato, dobbiamo fare in modo che il calendario risponda a requisiti ben precisi. Per fare questo, ci serviamo delle opzioni del calendario che impostiamo in una apposita sezione prima di far partire il nostro datepicker.

console.clear();

$(document).ready(function() {

  $.datepicker.setDefaults({
// qui le opzioni che andranno
    // ad aggiungere funzioni al datepicker

  }); // fine datepicker defaults

  // setter per datepicker
  $("#datepicker").datepicker();

}) // fine funzione (document).ready

Le funzioni che scelgo sono:

  • dateFormat: ‘dd/mm/yy’ – per impostare il formato data GG/M/AAAA;
  • minDate: “01/01/1901” – per impostare una data minima oltre il quale il nostro calendario non permette alcuna selezione; può contenere una data oppure un numero, anche negativo ( “01/01/1901” oppure -1, cioè ieri). E’ opzionale, se non viene specificato non esiste limite inferiore.
  • maxDate: -1 – per impostare una data massima oltre il quale il calendario non mostra nessuna data selezionabile.
  • changeMonth: true  – opzione che aggiunge la possibilità di selezionare direttamente il mese di interesse, senza dover scorrere con le frecce per effettuare la scelta.
  • changeYear: true  – opzione che fa apparire un menù a tendina per la scelta dell’anno di interesse.
  • onClose:/ onSelect: – permette di impostare una funzione che viene eseguita in seguito alla selezione della data.
$.datepicker.setDefaults({
    // formato data GG/MM/AAAA
    dateFormat: 'dd/mm/yy',
    // data minima: D-DAY!
    minDate: "06-06-1944",
    // data massima: ieri!
    maxDate: -1,
    // possibilità di cambiare mese
    changeMonth: true,
    // possibilità di cambiare anno
    changeYear: true,
    // a seguito della chiusura, esegue la funzione
    onClose: function() {

       // ----->  qui la funzione da eseguire  <-----

    } // fine funzione onClose

}); // fine datepicker defaults

Cosa fare della data selezionata? Mostriamola.

   console.log("Hai selezionato la data: " + selected_date);
   alert("Hai selezionato la data: " + selected_date);
  $("#mess").append('
<h1>Hai selezionato la data: ' + selected_date + '</h1>
');

Ma come recuperare la data selezionata? Creiamo una variabile che la contenga, e a quella variabile assegnamo il valore della data presa dal datepicker:

 var selected_date = $(this).val();

 

Il codice javascript completo è questo:

console.clear();

$(document).ready(function() {

$.datepicker.setDefaults({
// formato data GG/MM/AAAA
dateFormat: 'dd-mm-yy',
// data minima: D-DAY!
minDate: "06-06-1944",
// data massima: ieri!
maxDate: -1,
// possibilità di cambiare mese
changeMonth: true,
// possibilità di cambiare anno
changeYear: true,
// a seguito della chiusura, esegue la funzione
onClose: function() {

var selected_date = $(this).val();

console.log("Hai selezionato la data: " + selected_date);
alert("Hai selezionato la data: " + selected_date);
$("#mess").append('
<h1>Hai selezionato la data: ' + selected_date + '</h1>
');

} // fine funzione onClose

}); // fine datepicker defaults

// setter per datepicker
$("#datepicker").datepicker();

}) // fine funzione (document).ready

Qui si trova il Fiddle funzionante.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.