Maybaygiare.org

Blog Network

voeg een datepicker toe aan een invoerveld met behulp van jQuery UI

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>

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.