Crearea unui widget Datepicker
Există două moduri de bază pentru a crea un widget Datepicker. Cel mai adesea, este atașat la elementul de intrare utilizând metoda datepicker (). Nu schimbă imediat aspectul elementului, dar imediat ce elementul primește focalizarea de intrare (atunci când faceți clic pe el sau mutați-l de la alte elemente folosind tasta
Calendarele de tipul descris sunt numite calendare pop-up. Un exemplu de creare a unui astfel de calendar este prezentat mai jos:
Figura arată ce se întâmplă atunci când mutați focalizarea în câmpul de introducere:
Utilizatorul poate introduce manual data, sau o poate selecta folosind calendarul. De îndată ce elementul de intrare pierde focalizarea sau utilizatorul apasă tasta
Datekicker widget localization
Fișier jquery-ui-i18n.js situat în directorul de dezvoltare-pachet / Ul / i18n bibliotecă fișier arhivă jQuery UI, trebuie să fi descărcat de pe site-ul jqueryui.com. Copiați-l în același director ca și fișierul sursă și adăugați-l în document așa cum se arată în cod. Rezultatul este arătat în figură:
Creați un calendar built-in Datepicker
Cea de-a doua modalitate de a utiliza widgetul Datepicker este de ao încorpora în document. Pentru aceasta, selectați elementul div sau intervalul folosind jQuery și apelați metoda datepicker (). Calendarul încorporat este afișat tot timpul până când elementul HTML, pe baza căruia a fost creat, este vizibil. Un exemplu de creare a unui calendar încorporat este prezentat mai jos:
În acest exemplu, elementul Span este utilizat ca element HTML de bază pentru crearea widget-ului Datepicker. Rezultatul este arătat în figură:
Un calendar încorporat poate fi util dacă nu doriți să lucrați cu obiecte pop-up. Desigur, există aplicații în care munca cu date este atât de intensă încât este logic să aveți în mod constant un calendar la îndemână. Dar, în cele mai multe cazuri, este recomandabil să păstrați calendarul ascuns până când devine necesar.
Dificultatea cu ascunderea și afișarea DatePicker widget încorporat datorită faptului că adăugarea sa la un document care atrage după sine necesitatea de a schimba aspectul paginii, care poate genera probleme de prezentare. Din punctul meu de vedere, în cele mai multe situații este mult mai convenabil să folosiți un widget pop-up.
Setarea widget-ului Datepicker
Setări de bază
Unele opțiuni de configurare sunt utilizate pentru a configura proprietățile de bază ale ferestrelor pop-up și calendarelor încorporate. Aceste proprietăți sunt foarte importante, deoarece vă permit să gestionați integrarea widget-ului într-un document. Lista lor este prezentată în tabelul de mai jos:
Proprietățile de bază ale widget-ului Datepicker
Setează valoarea specificată ca dată calendaristică selectată
Primirea și schimbarea programată a datei
Cel mai adesea recurg la utilizarea metodelor getDate și setDate când vreau să ofer utilizatorilor posibilitatea de a selecta intervale de date întregi utilizând mai multe widget-uri Datepicker. În astfel de situații, prefer să nu se afișeze datele selectate în casete de text și să se afișeze numai numărul de zile între limitele de dată specificate. Exemplul corespunzător este prezentat mai jos:
În acest exemplu, sunt create două calendare, dintre care unul imediat după încărcarea documentului este în starea deconectată. Pentru a răspunde la alegerea datelor, utilizatorul folosește evenimentul onSelect (pe care îl vom discuta în detaliu mai jos).
Odată ce utilizatorul selectează o dată în primul calendar folosim metoda setDate pentru prepararea celui de al doilea calendar, și metoda getDate - pentru datele ambelor calendare și apoi calculul diferenței de zile între prima și a doua date (pentru simplitate, se presupune că ambele date se referă la un singur și aceeași lună). Tipul de document din fereastra browserului este prezentat în imagine:
Datepicker evenimente widget
Ca toate widgeturile jQuery UI, widgetul Datepicker acceptă un set de evenimente care vă permit să primiți notificări despre schimbări importante în starea aplicației. Aceste evenimente sunt prezentate în tabelul de mai jos:
Datepicker evenimente widget
Articole similare
Trimiteți-le prietenilor: