Datapickers med jQuery UI

Nogle af disse med en mere kompliceret programmering end andre eller simpelthen deres implementering kan være ret besværlige, men jQuery og dens bibliotekspakke giver os metoder til at bygge Datapickers hurtigt og effektivt med topmoderne design og betjening.
Datepicker () -metoden
Metoden til datapicker () ændre HTML -udseendet ved at tilføje en ny CSS -klasse, med denne ændring tilføjes en kalender, der vises i et element af typen input, der tidligere er angivet i funktionen Javascript.
Metoden datapicker () kan bruges på to forskellige måder:

 $ (vælger, kontekst) .datepicker (muligheder) $ (vælger, kontekst) .datepicker ("handling", params) 

Lad os se et enkelt eksempel på, hvordan det fungerer:

• Vi tilføjer bibliotekerne af jQuery og CSS til vores dokument.

• Vi skaber vores funktion i Javascript og vi instantiserer metoden til datapicker og tildeler den den vælger, som den vil blive vist i.

• Og endelig i HTML tilføjer vi id = datepicker til input, hvilket angiver, at dens funktion, at når den klikkes på den, ændrer css og viser kalenderen.

Dato: 

Og det ville se sådan ud i vores browser:

Her er den komplette kode:

 jQuery UI Datepicker - Standardfunktionalitet
Dato:

Lad os se et mere avanceret eksempel, hvor vi vil bruge flere egenskaber ved metoden datapicker hvormed vi vil validere datointervaller samt antallet af kalendere, der skal vises.

• 1 - Først inkluderer vi de nødvendige filer:

• 2 - Vi instanterer metoden to gange for to felter af forskellig inputtype, hvortil vi tilføjer mulighederne for at validere, at datoen, der er angivet i det andet felt, ikke er større end det andet, samt antallet af kalendere, der skal vises.

• 3 - Endelig skaber vi vores input i HTML med nogle etiketter til at identificere dem.

[/ indrykning] Fra til 

Lad os se, hvordan det ville se ud i vores browser:

Her efterlader jeg den komplette kode, så du kan teste den og foretage ændringer efter din smag:

 jQuery UI Datepicker - Vælg et datointerval fra til 

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt