Datepicker con interfaccia utente jQuery

Alcuni di questi con una programmazione più complicata di altri o semplicemente la loro implementazione possono essere piuttosto laboriosi, ma jQuery e il suo pacchetto di librerie ci danno metodi per costruire Datepicker in modo rapido ed efficiente con un design e un funzionamento all'avanguardia.
Il metodo Datepicker()
Il metodo di date picker () cambia l'aspetto dell'HTML aggiungendo una nuova classe CSS, con questa modifica viene aggiunto un calendario che viene visualizzato in un elemento di tipo input, precedentemente specificato nella funzione Javascript.
Il metodo date picker () può essere utilizzato in due modi diversi:

 $ (selettore, contesto) .datepicker (opzioni) $ (selettore, contesto) .datepicker ("azione", parametri) 

Vediamo un semplice esempio di come funziona:

• Aggiungiamo le librerie di jQuery e il CSS al nostro documento.

• Creiamo la nostra funzione in Javascript e istanziamo il metodo di date picker e assegnandogli il selettore in cui verrà visualizzato.

• E infine nel HTML aggiungiamo il id = datapicker all'input indicando che il suo funzionamento che quando viene cliccato modifica il css e visualizza il calendario.

Data: 

E sembrerebbe così nel nostro browser:

Qui il codice completo:

 jQuery UI Datepicker - Funzionalità predefinita
Data:

Vediamo un esempio più avanzato in cui utilizzeremo diverse proprietà del metodo date picker con cui convalideremo gli intervalli di date e il numero di calendari da visualizzare.

• 1 - Per prima cosa includiamo i file necessari:

• 2 - Istanziamo il metodo due volte per due campi di diverso tipo di input, a cui aggiungiamo le opzioni per convalidare che la data inserita nel secondo campo non sia maggiore del secondo, nonché il numero di calendari che verranno visualizzati.

• 3 - Infine creiamo il nostro input nel HTML con alcune etichette per identificarli.

[/ rientro] Da a 

Vediamo come apparirà nel nostro browser:

Qui lascio il codice completo per testarlo e apportare modifiche a proprio piacimento:

 jQuery UI Datepicker - Seleziona un intervallo di date da a 

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo