Datepickers su jQuery UI

Kai kurie iš jų turi sudėtingesnį programavimą nei kiti arba tiesiog jų įgyvendinimas gali būti gana sunkus, tačiau „jQuery“ ir jo bibliotekos paketas suteikia mums būdų kurti Datų rinkėjai greitai ir efektyviai, naudojant moderniausią dizainą ir eksploatavimą.
Datepicker () metodas
Metodas datos rinkiklis () pakeisti HTML išvaizdą, pridedant naują CSS klasę, su šiuo pakeitimu pridedamas kalendorius, kuris rodomas įvesties tipo elemente, anksčiau nurodytame funkcijoje Javascript.
Metodas datos rinkiklis () galima naudoti dviem skirtingais būdais:

 $ (selektorius, kontekstas) .datepicker (parinktys) $ (selektorius, kontekstas) .datepicker („veiksmas“, parametrai) 

Pažiūrėkime paprastą pavyzdį, kaip tai veikia:

• Pridedame biblioteką „jQuery“ ir CSS prie mūsų dokumento.

• Mes kuriame savo funkciją Javascript ir mes parodome metodą datų rinkiklis ir priskirkite jam selektorių, kuriame jis bus rodomas.

• Ir galiausiai HTML pridedame id = datos rinkiklis įvestį, nurodančią, kad jos veikimas, kurį spustelėjus, modifikuoja css ir rodo kalendorių.

Data: 

Ir mūsų naršyklėje tai atrodytų taip:

Čia yra visas kodas:

 „jQuery“ vartotojo sąsajos datos parinkiklis - numatytoji funkcija
Data:

Pažvelkime į sudėtingesnį pavyzdį, kuriame naudosime kelias metodo savybes datų rinkiklis su kuriomis patvirtinsime dienų sekas ir rodomų kalendorių skaičių.

• 1 - Pirmiausia įtraukiame reikiamus failus:

• 2 - Du kartus parodome metodą dviem skirtingo įvesties tipo laukams, prie kurių pridedame parinktis, kad patvirtintume, jog antrame lauke įvesta data nėra didesnė už antrąją, taip pat rodomų kalendorių skaičių.

• 3 - Galiausiai sukuriame savo indėlį HTML su kai kuriomis etiketėmis jas identifikuoti.

[/ įtrauka] Nuo iki 

Pažiūrėkime, kaip tai atrodys mūsų naršyklėje:

Čia palieku jums visą kodą, kad galėtumėte jį išbandyti ir pakeisti pagal savo skonį:

 „jQuery“ vartotojo sąsajos datos parinkiklis - pasirinkite dienų seką nuo iki 

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką