Datepickers cu jQuery UI

Cuprins
Unele dintre acestea cu o programare mai complicată decât altele sau pur și simplu implementarea lor pot fi destul de laborioase, dar jQuery și pachetul său de bibliotecă ne oferă metode de construire Datepickers rapid și eficient cu design și operare de ultimă generație.
Metoda Datepicker ()
Metoda de datepicker () modificați aspectul HTML adăugând o nouă clasă CSS, cu această modificare se adaugă un calendar care este afișat într-un element de tip input, specificat anterior în funcție Javascript.
Metoda datepicker () poate fi folosit în două moduri diferite:
 $ (selector, context) .datepicker (opțiuni) $ (selector, context) .datepicker ("acțiune", parametri) 

Să vedem un exemplu simplu de funcționare:
  • Adăugăm bibliotecile din jQuery si CSS la documentul nostru.
 
  • Ne creăm funcția în Javascript și noi instanțiem metoda datapicker și atribuindu-i selectorul în care va fi afișat.
 
  • Și în cele din urmă în HTML adăugăm id = datapicker la intrare indicând faptul că funcționarea sa care, atunci când se face clic pe el, modifică CSS și afișează calendarul.
Data: 

Și ar arăta așa în browserul nostru:

Aici codul complet:
 jQuery UI Datepicker - Funcționalitate implicită

Data:


Să vedem un exemplu mai avansat în care vom folosi mai multe proprietăți ale metodei datapicker cu care vom valida intervalele de date precum și numărul de calendare de afișat.
  • 1 - Mai întâi includem fișierele necesare:

 

  • 2 - Instanțiem metoda de două ori pentru două câmpuri de tip de intrare diferit, la care adăugăm opțiunile pentru a valida că data introdusă în al doilea câmp nu este mai mare decât al doilea, precum și numărul de calendare care vor fi afișate.

 

  • 3 - În cele din urmă, ne creăm contribuția în HTML cu câteva etichete pentru a le identifica.
[/ indent] De la până la 

Să vedem cum ar arăta în browserul nostru:

Aici vă las codul complet pentru a-l testa și a face modificări pe placul dvs.:
 jQuery UI Datepicker - Selectați un interval de date de la până la 
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv

Vei ajuta la dezvoltarea site-ului, partajarea pagina cu prietenii

wave wave wave wave wave