Datepickers hjelper brukerne med å velge en dato gjennom en kalender. Dette unngår feil nesten alltid forårsaket av en dårlig datoinngang, for eksempel en dårlig formatering. Ved hjelp av jquery plugin kan du enkelt legge til en datepicker til et inntastingsfelt. Det er mange datepicker plugins tilgjengelig, men jQuery UI Datepicker Er en av de beste siden den har mange tilpasningsmuligheter.
i denne opplæringen viser vi deg hvordan du legger til en datepicker i et inntastingsfelt ved hjelp av jQuery. Med denne datepicker, hver gang et bestemt inntastingsfelt klikkes, åpnes en kalender. Brukeren vil kunne velge fra denne kalenderen, en dato(dag, måned og år).
Jquery UI
Først av Alt må vi inkludere jquery UI biblioteket for å bruke sine funksjoner.
Grunnleggende Datepicker-funksjonalitet
i dette eksemplet viser jeg deg hvordan du legger til en datepicker i et inntastingsfelt.
Javascript-kode
Vi må spesifisere IDEN til inntastingsfeltet som datepicker-velgeren.
$(function(){ $("#datepicker").datepicker();});
HTML-kode
når du fokuserer på inntastingsfeltet, åpnes en interaktiv kalender.
<p>Date: <input type="text"></p>
Avansert funksjonalitet Av Datepicker
i de følgende linjene vil vi se hvordan å gjøre en mer avansert bruk Av Datepicker gjennom flere alternativer som det gir oss.
Endre datoformat
som standard bruker plugin formatet MM/DD / ÅÅÅÅ. Ved Hjelp Av DateFormat alternativet kan vi endre datoformatet i henhold til våre behov.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Velg måned og år
som standard endrer vi måned og år med venstre og høyre pil. Med alternativene changeMonth og changeYear kan vi vise en meny med å velge måned og år.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Begrens et datointervall
Med Datepicker kan du velge hvilken som helst dato, men hvis du vil begrense dette, kan du bruke alternativene minDate og maxDate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker fra til
I følgende eksempel viser jeg deg hvordan du implementerer en datepicker der brukeren må angi en dato fra, og en dato til. Smule av dette skriptet er at datoen til, kan aldri være tidligere enn datoen fra.
HTML-Kode
brukeren kan velge hvilken som helst dato i Fra-feltet, men kan bare velge en som er lik eller større enn den forrige verdien i til-feltet.
<p>Date: <input type="text"> TO <input type="text"></p>