Datepickers hjælper brugerne med at vælge en dato gennem en kalender. Dette undgår fejl næsten altid forårsaget af en dårlig datoindgang, såsom en dårlig formatering. Ved hjælp af dette plugin kan du nemt tilføje en datepicker til et indtastningsfelt. Der er mange datepicker-plugins tilgængelige, men UI Datepicker er en af de bedste, da den har mange tilpasningsmuligheder.
i denne vejledning viser vi dig, hvordan du tilføjer en datepicker til et inputfelt ved hjælp af jfor. Med denne datepicker åbnes en kalender, hver gang der klikkes på et specifikt indtastningsfelt. Brugeren vil kunne vælge fra denne kalender, en dato (dag, måned og år).
UI
først og fremmest skal vi inkludere UI-biblioteket for at bruge dets funktioner.
grundlæggende Datepicker-funktionalitet
i dette eksempel viser jeg dig, hvordan du tilføjer en datepicker til et inputfelt.
Javascript-kode
Vi skal angive id ‘ et for inputfeltet som datepicker-vælgeren.
$(function(){ $("#datepicker").datepicker();});
HTML-kode
når du fokuserer på indtastningsfeltet, åbnes en interaktiv kalender.
<p>Date: <input type="text"></p>
avanceret funktionalitet af Datepicker
i de følgende linjer vil vi se, hvordan man gør en mere avanceret brug af Datepicker gennem de flere muligheder, Den tilbyder os.
Skift datoformat
som standard bruger plugin MM / DD / ÅÅÅÅ format. Ved hjælp af indstillingen DateFormat kan vi ændre datoformatet i henhold til vores behov.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Vælg måned og år
som standard ændrer vi måned og år med venstre og højre pil. Med indstillingerne changeMonth og changeYear kan vi vise en menu, som du kan vælge måned og år med.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Begræns et datointerval
Med Datepicker kan du vælge en hvilken som helst dato, men hvis du vil begrænse dette, kan du bruge indstillingerne minDate og maksdate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker fra til
i det følgende eksempel viser jeg dig, hvordan du implementerer en datepicker, hvor brugeren skal indtaste en dato fra og en dato til. Krummen i dette script er, at datoen til, kan aldrig være tidligere end datoen fra.
HTML-kode
brugeren kan vælge en hvilken som helst dato i feltet Fra, men kan kun vælge en, der er lig med eller større end den forrige værdi i feltet til.
<p>Date: <input type="text"> TO <input type="text"></p>