Doar specificați ciclul acestor articole nu sunt destinate pro durificat, acesta este doar un impuls pentru dezvoltare, un fel de un tur mic de oportunități pentru începători, pentru cei care nu au nici o idee despre UI și jQuery ca un întreg.
Să mergem!
Așa că pregătirile sunt terminate.
Pentru a crea un calendar, aveți nevoie de o singură linie de html:
Sau dacă doriți să încorporați un calendar într-un site ca element de pagină:
Și câteva linii de JS:
Deci, avem un calendar complet de lucru în limba rusă, dar dintr-o dată facem site-ul în limba engleză sau ucraineană? Pentru a schimba situația în favoarea noastră, trebuie doar să modificați un parametru și îl puteți face dinamic:
Funcționalitatea standard "în mod prestabilit" nu este întotdeauna suficientă pentru a efectua anumite sarcini. Prin urmare, o mică setare de editare:
În lista de mai sus, avem trei opțiuni, în care există apeluri telefonice.
beforeShow este funcția care va fi apelată înainte de afișarea calendarului.
Cu ajutorul opțiunilor css se va instala fundalul galben.
În funcția onSelect, este definită o funcție care va fi apelată când este selectată o dată, va afișa data selectată în alertă și va trece o valoare goală la opțiunea css, care returnează vizualizarea anterioară la intrare.
onClose funcția care va funcționa atunci când calendarul este închis - care este, transformă fundal alb.
În exemplul de mai sus, demonstrez funcționarea metodei de dialog. Apelam această metodă când faceți clic pe link. Primul argument este numele metodei, al doilea argument este textDate - data la care calendarul va fi deschis în mod implicit. În argumentul onSelect, puteți transmite o funcție de retur care va fi apelată când selectați o anumită dată din calendar. În argumentul setări, puteți transfera un obiect cu setările noului widget care vor fi aplicate calendarului care va fi deschis în caseta de dialog.
Păi, asta pare să fie ... Utilizați! Apoi este dată o listă cu toate opțiunile, metodele și evenimentele.
- beforeShow - aici puteți defini funcția care va fi apelată înainte de deschiderea calendarului. Funcția ia ca argument un obiect care caracterizează câmpul de introducere a textului cu care widget-ul funcționează.
- beforeShowDay - în această opțiune, puteți defini o funcție personalizată care va lua data selectată ca argument. Funcția trebuie să returneze o matrice în care elementul cu indexul [0] - true sau false indică dacă această dată este sau nu posibilă. Un element cu index [1] conține numele clasei (clasei) pentru afișarea datei. Element cu index [2] (opțional) - textul indicativului pentru dată. Funcția va fi apelată pentru fiecare dată din calendar atunci când indicatorul mouse-ului se termină.
- onChangeMonthYear - aici puteți defini funcția care va fi apelată când luna sau anul se va schimba în calendar. Funcția are trei argumente. Primele două argumente sunt valorile noului an și lună, al treilea argument este obiectul datepicker.
- onClose - această opțiune definește funcția care va fi apelată când calendarul a fost închis fără selectarea oricărei date.
- onSelect - această opțiune definește o funcție care va fi apelată când o dată este selectată în calendar.
- destroy - .datepicker ('destroy') elimină complet toate funcționalitățile widget-ului Datepicker. Returnează elementele în stare înainte de inițializare.
- dezactivează - .datepicker ("dezactivează") dezactivează temporar utilizarea funcționalității tuturor widgeturilor. Puteți să-l activați din nou utilizând metoda de activare.
- enable - .datepicker ('enable') permite utilizarea tuturor funcționalităților widget dacă a fost dezactivată anterior utilizând metoda dezactivării.
- optiunea - .datepicker ('optiune', optionName, [value]) Folosind aceasta metoda, poti obtine sau seta valoarea oricarei optiuni widget dupa initializare.
- dialog - .datepicker ( 'dialog', dateText, [onSelect], [Setări], [poz]) se deschide DatePicker widget în modul caseta de dialog. Argumentul dateText este trecut data la care ar trebui să fie deschis calendarul. Argumentele rămase sunt opționale. Argumentul onSelect poate trece o funcție pentru a fi numit în momentul selectării o dată în calendar, în argumentul setările pe care le poate trece un obiect cu noile setări widget pos argument - coordonatele în care caseta de dialog se va deschide. Aici puteți utiliza evenimentele mouse-ului pentru a determina coordonatele.
- metoda isDisabled - .datepicker ('isDisabled') returnează true dacă metoda de dezactivare a fost aplicată widget-ului și false altfel.
- ascunde - .datepicker ("ascunde", [viteza]) ascunde calendarul deschis anterior.
- show - .datepicker ('show') deschide calendarul.
- metoda getDate - .datepicker ('getDate') returnează data selectată în calendar.
- setDate - .datepicker ('setDate', data) Această metodă vă permite să setați data în calendar. Valoarea argumentului datei poate fi un șir (de exemplu: 25.10.1917)
Buna ziua tuturor! Spune-mi ce e problema, te rog. Conectez totul conform instrucțiunilor, totul funcționează bine, chiar și în cel de-al șaselea măgar. După ce încep schimbarea setărilor, de exemplu, am adăugat $ ("# datepicker"). Datepicker ();>); - Lucrează oriunde, cu excepția măgarului și a oricăror! Când faceți clic pe câmp, nu se întâmplă nimic. Mutarea pe site-ul dvs. - totul este bine, am încercat să adaug setări la exemplul descărcat - dispare din nou în măgar.
Buna ziua. Foarte utile informații, dar, din păcate, eu încă nu înțeleg, data mea este de ieșire în format mm.dd.yyyy, cum pot schimba la dd.mm.yyyy. Și chiar după alegerea datei, trebuie să știu ziua din săptămână, cum să o fac?
Articole similare
Trimiteți-le prietenilor: