Datepickers aiuta gli utenti a selezionare una data tramite un calendario. Ciò evita errori quasi sempre causati da un input di data errato, ad esempio una formattazione errata. Usando il plugin jQuery puoi facilmente aggiungere un datepicker a un campo di input. Ci sono molti plugin datepicker disponibili, ma jQuery UI Datepicker è uno dei migliori in quanto ha molte opzioni di personalizzazione.
In questo tutorial, ti mostreremo come aggiungere un datepicker a un campo di input usando jQuery. Con questo datepicker, ogni volta che si fa clic su un campo di input specifico, si aprirà un calendario. L’utente sarà in grado di scegliere da questo calendario, una data (giorno, mese e anno).
Jquery UI
Prima di tutto, dobbiamo includere la libreria jQuery UI per utilizzare le sue funzioni.
Funzionalità di base Datepicker
In questo esempio, ti mostro come aggiungere un datepicker a un campo di input.
Codice Javascript
Dobbiamo specificare l’ID del campo di input come selettore datepicker.
$(function(){ $("#datepicker").datepicker();});
Codice HTML
Quando ci si concentra sul campo di input, si aprirà un calendario interattivo.
<p>Date: <input type="text"></p>
Funzionalità avanzate del Datepicker
Nelle righe seguenti vedremo come fare un uso più avanzato del Datepicker attraverso le molteplici opzioni che ci offre.
Modifica formato data
Per impostazione predefinita, il plugin utilizza il formato MM/GG / AAAA. Utilizzando l’opzione DateFormat possiamo cambiare il formato della data in base alle nostre esigenze.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Seleziona mese e anno
Per impostazione predefinita, cambiamo mese e anno con le frecce sinistra e destra. Con le opzioni changeMonth e changeYear possiamo mostrare un menu con cui selezionare il mese e l’anno.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Limita un intervallo di date
Con Datepicker puoi selezionare qualsiasi data, ma se vuoi limitarla, puoi usare le opzioni minDate e maxDate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker da a
Nel seguente esempio vi mostro come implementare un datepicker in cui l’utente deve inserire una data da, e una data a. La briciola di questo script è che la data di, non può mai essere prima della data da.
Codice HTML
L’utente può selezionare qualsiasi data nel campo From, ma può selezionarne solo una uguale o maggiore del valore precedente nel campo To.
<p>Date: <input type="text"> TO <input type="text"></p>