Datapickers med jQuery UI

Vissa av dessa med en mer komplicerad programmering än andra eller helt enkelt deras implementering kan vara ganska mödosamma, men jQuery och dess bibliotekspaket ger oss metoder att bygga Datapickers snabbt och effektivt med toppmodern design och drift.
Datepicker () -metoden
Metoden för Datumväljare () ändra HTML -utseendet genom att lägga till en ny CSS -klass, med den här ändringen läggs en kalender till som visas i ett element av typinmatning, som tidigare har angetts i funktionen Javascript.
Metoden Datumväljare () kan användas på två olika sätt:

 $ (väljare, sammanhang) .datepicker (alternativ) $ (väljare, sammanhang) .datepicker ("åtgärd", params) 

Låt oss se ett enkelt exempel på hur det fungerar:

• Vi lägger till biblioteken för jQuery och den CSS till vårt dokument.

• Vi skapar vår funktion i Javascript och vi instanserar metoden för Datumväljare och tilldela den väljaren i vilken den ska visas.

• Och slutligen i HTML vi lägger till id = datapicker till ingången som indikerar att dess funktion att när den klickas på den ändrar css och visar kalendern.

Datum: 

Och det skulle se ut så här i vår webbläsare:

Här är hela koden:

 jQuery UI Datepicker - Standardfunktion
Datum:

Låt oss se ett mer avancerat exempel där vi kommer att använda flera egenskaper hos metoden Datumväljare med vilka vi kommer att validera datumintervall samt antalet kalendrar som ska visas.

• 1 - Först inkluderar vi nödvändiga filer:

• 2 - Vi instanserar metoden två gånger för två fält av olika inmatningstyp, till vilka vi lägger till alternativen för att validera att datumet som anges i det andra fältet inte är större än det andra, liksom antalet kalendrar som ska visas.

• 3 - Slutligen skapar vi vår input i HTML med några etiketter för att identifiera dem.

[/ indent] Från till 

Låt oss se hur det skulle se ut i vår webbläsare:

Här lämnar jag hela koden för dig att testa den och göra ändringar som du gillar:

 jQuery UI Datepicker - Välj ett datumintervall från till 

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng