De JavaScript “Datepicker” tillater deg å velge en dato fra en interaktiv rullegardinkalender i stedet for å skrive den manuelt. Det brukes i scenarier der du vil planlegge oppgaver i henhold til en bestemt dato, for eksempel å lagre en fødselsdato. En "Datovelger”Kan raskt legges til en“inngangsfelt" bruker "jQuery -plugin“. Ulike andre datepicker -plugins eksisterer også; derimot, "JQuery UI Datepicker”Skiller seg ut i markedet på grunn av dens svært fleksible natur.

Dette innlegget vil diskutere prosedyren for å bruke en JavaScript datepicker. Så la oss starte!

jQueryui datepicker plugin

JQueryui “Datovelger”Plugin gjør det mulig for brukeren å oppgi datoene visuelt. Det lar deg også enkelt endre datoformatet og dets språk, legge til navigasjonsalternativer og begrense datoområdene. For å bruke alle disse funksjonalitetene, tilbyr jQueryui en "Datovelger()”Metode og legger til nye CSS -klasser til HTML -sider ved å endre utseendet.

Syntaks

$ (velger).datepicker (alternativer);

Her, "velger”Parameter representerer CSS -velgerne som“div”Eller hvilken som helst dokumentobjektmodellnode, og“alternativer”Er en valgfri parameter som omfatter forskjellige alternativer som for eksempel “DateFormat”, “Closetext”, “DayNames”.

La oss nå ta turen mot implementeringen av JavaScript “Datovelger”.

Hvordan du bruker javascript datepicker

For demonstrasjonsformålet vil vi opprette et JavaScript -applikasjon og legge til funksjonaliteten til en grunnleggende “Datovelger" til en inngangsfelt. For å gjøre det samme, følg de gitte trinn-for-trinn-instruksjonene:

Trinn 1: Importer nødvendige biblioteker

Først av alt, importer de nødvendige bibliotekene i HTML -filen for bruk av jQuery UI -plugin:

Trinn 2: Legg til HTML -elementer

I neste trinn, lag de ønskede HTML -elementene i søknaden din. I vårt tilfelle vil vi først legge til en “Tittel” i “” -merket:

Deretter en overskrift med "

”Tag og et avsnitt med“

”Tag, inne i“" stikkord:

Demonstrasjon av å bruke JavaScript Datepicker

Angi dato:

Også i det ekstra "inngangsfelt”, Vil en interaktiv kalender vises i et overlegg når inngangsfeltet er fokusert.

Trinn 3: JavaScript -filkode

Bytt til JavaScript -filen din og skriv ut følgende kode for å spesifisere inngangsfelt -ID "#Datovelger" som "velger”Parameter for“Datovelger()”Metode. Her kan du også legge til noen avanserte konfigurasjonsalternativer "relatert til JavaScript"Datovelger”For eksempel å endre datoformatet:

$ (funksjon ()
$ ("#datepicker").Datovelger();
dateformat: "yy-mm-dd"
);

Trinn 4: CSS -filkode

For å forbedre utseendet til JavaScript -applikasjonen, definerer du stilen til ekstra HTML -elementer i CSS -filen. For eksempel vil vi legge til bakgrunnsfargen for "kropp“, Tekstfarge og font-familie for “H1” overskrift og “P” Paragrafelementer:

kropp
Bakgrunnsfarge: PowderBlue;

H1
Farge: RGB (21, 7, 145);
Font-Family: 'Courier New', Courier, Monospace;

P
Farge: RGB (37, 25, 5);
Font-Family: Courier;

Trinn 5: Link CSS og JavaScript til HTML -fil

Til slutt kobler du CSS- og JavaScript -filene til JavaScript -prosjektet HTML -fil:

Slik er vår “JavaScript datepicker.html”Fil ser ut som:

Trinn 6: Kjør JavaScript -applikasjon

Etter å ha lagt til all den nødvendige koden, høyreklikk på HTML-filen, og velg "fra den åpne kontekstmenyen"Åpent med live server”Alternativ:

Din opprettede JavaScript -applikasjon vil nå kjøre i nettleseren. Klikk på "inngangsfelt”Og velg en dato fra“Datovelger”:

Vi viste deg metoden for å bruke en grunnleggende JavaScript datepicker. Du kan videre utforske etter behov.

Konklusjon

jQueryui tilbyr en "Datovelger()”Metode som tillater deg å velge en dato fra en interaktiv rullegardinkalender i stedet for manuelt å skrive den manuelt. En JavaScript Datepicker brukes i scenarier der du vil planlegge oppgaver i henhold til en bestemt dato, for eksempel å lagre en fødselsdato. I dette innlegget har vi diskutert metoden for å legge til funksjonaliteten til en grunnleggende “Datovelger”Til et inngangsfelt.