Maybaygiare.org

Blog Network

Aggiungi un datepicker a un campo di input usando jQuery UI

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>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.