Guida Datepicker, utilizzare il calendario jQuery UI
4 settembre 2013  //  By:   //  Html, Javascript  //  No Comment   //   3831 Views

Quando si crea un sito web può capire di dover utilizzare campi data ed uno dei metodi più veloci ed ottimizzati è quello di utilizzare il calendario jQuery UI, Datapicker

l datepicker è legato a un campo di input forma standard. Tramite un click sul form di input della data viene aperto un calendario interattivo in un piccolo overlay. Scegli una data, fai clic oppure premere il tasto Esc per chiudere.

Scelta la data, verrà mostrata come il valore nel form.

Andiamo ad utilizzare nel codice la solita creazione di una pagina con struttura html5 ed inseriamo nell’head i link per le librerie tramite CDN (vedere articolo jquery)

Inoltre possiamo personalizzare il nostro calendario tramite delle semplici opzioni da inserire nello script, vediamo alcuni esempi:

partiamo col modificare il formato della data in dd-mm-yy e disabilitare le date precedenti ad oggi.

Nel caso in cui vogliate invece cambiare la lingua di default (inglese) nella vostra in questo caso Italiana potete usare questa funzione:

in questo caso oltre a cambiare lingue, il formato della data, disabilitate le date passate, farete partire il giorno del vostro calendario sempre dal giorno 1.

Vediamo una demo

About the Author :

BI CONSULTING. Studente di Ingegneria Informatica, Sistemista Linux e appassionato di tutto ciò che sia tecnologico ma soprattutto Open Source. Distro: Debian e Arch LInux. Smartphone: Nexus / Lg G2 Buona Lettura  Visualizza il profilo su Linkedln

Leave a reply