Datepickers met jQuery UI

Sommige van deze met een meer gecompliceerde programmering dan andere of gewoon de implementatie ervan kan behoorlijk arbeidsintensief zijn, maar jQuery en zijn bibliotheekpakket geven ons methoden om te bouwen Datepickers snel en efficiënt met state-of-the-art ontwerp en bediening.
De methode Datepicker ()
De methode van datumkiezer () verander het uiterlijk van de HTML door een nieuwe CSS-klasse toe te voegen, met deze wijziging wordt een kalender toegevoegd die wordt weergegeven in een element van het type invoer, eerder gespecificeerd in de functie Javascript.
De methode datumkiezer () kan op twee verschillende manieren worden gebruikt:

 $ (selector, context) .datepicker (opties) $ (selector, context) .datepicker ("actie", parameters) 

Laten we een eenvoudig voorbeeld bekijken van hoe het werkt:

• We voegen de bibliotheken van . toe jQuery en de CSS naar ons document.

• We creëren onze functie in Javascript en we instantiëren de methode van datumkiezer en het toewijzen van de selector waarin het zal worden weergegeven.

• En tot slot in de HTML we voegen de toe id = datumkiezer naar de invoer die aangeeft dat de werking ervan dat wanneer erop wordt geklikt, de css wordt gewijzigd en de kalender wordt weergegeven.

Datum: 

En het zou er zo uitzien in onze browser:

Hier de volledige code:

 jQuery UI Datepicker - Standaardfunctionaliteit
Datum:

Laten we een meer geavanceerd voorbeeld bekijken waarin we verschillende eigenschappen van de methode zullen gebruiken datumkiezer waarmee we datumbereiken valideren, evenals het aantal kalenders dat moet worden weergegeven.

• 1 - Eerst voegen we de benodigde bestanden toe:

• 2 - We instantiëren de methode twee keer voor twee velden van verschillend invoertype, waaraan we de opties toevoegen om te valideren dat de datum die in het tweede veld is ingevoerd niet groter is dan het tweede, evenals het aantal kalenders dat wordt weergegeven.

• 3 - Tot slot creëren we onze input in de HTML met enkele labels om ze te identificeren.

[/ streepje] Van tot 

Laten we eens kijken hoe het eruit zou zien in onze browser:

Hier laat ik de volledige code voor u achter om deze te testen en naar wens aan te passen:

 jQuery UI Datepicker - Selecteer een datumbereik van tot 

Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven