datepickers helpen gebruikers een datum te selecteren via een agenda. Dit voorkomt fouten bijna altijd veroorzaakt door een slechte datum invoer, zoals een slechte opmaak. Met behulp van de jQuery plugin kunt u eenvoudig een datepicker toe te voegen aan een invoerveld. Er zijn veel datepicker plugins beschikbaar, maar jQuery UI Datepicker is een van de beste, omdat het heeft veel aanpassingsopties.
in deze tutorial laten we u zien hoe u een datepicker toevoegt aan een invoerveld met behulp van jQuery. Met deze datepicker, elke keer dat een specifiek invoerveld wordt geklikt, een kalender wordt geopend. De gebruiker kan kiezen uit deze kalender, een datum (dag, maand en jaar).
jQuery UI
Allereerst moeten we de jQuery UI library opnemen om zijn functies te kunnen gebruiken.
basis datepicker functionaliteit
In dit voorbeeld laat ik u zien hoe u een datepicker toevoegt aan een invoerveld.
Javascript code
We moeten de ID van het invoerveld opgeven als de datepicker selector.
$(function(){ $("#datepicker").datepicker();});
HTML-code
wanneer u zich op het invoerveld concentreert, wordt een interactieve agenda geopend.
<p>Date: <input type="text"></p>
geavanceerde functionaliteit van de datepicker
In de volgende regels zullen we zien hoe we een geavanceerder gebruik van de datepicker kunnen maken door de meerdere opties die het ons biedt.
datumnotatie wijzigen
standaard gebruikt de plugin het MM/DD / JJJJ-formaat. Met behulp van de optie DateFormat kunnen we het datumformaat aanpassen aan onze behoeften.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Selecteer maand en jaar
standaard veranderen we maand en jaar met de linker-en rechterpijl. Met de opties changeMonth en changejaar kunnen we een menu tonen waarmee we de maand en het jaar kunnen selecteren.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
beperk een datumbereik
met Datepicker kunt u elke datum selecteren, maar als u dit wilt beperken, kunt u de opties minDate en maxDate gebruiken.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker van naar
In het volgende voorbeeld laat ik u zien hoe u een datepicker implementeert waarin de gebruiker een datum van en een datum naar moet invoeren. De kruimel van dit script is dat de datum tot, kan nooit eerder zijn dan de datum van.
HTML-Code
De gebruiker kan elke datum in het veld vanaf selecteren, maar kan er slechts één selecteren die gelijk is aan of groter is dan de vorige waarde in het veld aan.
<p>Date: <input type="text"> TO <input type="text"></p>