Maybaygiare.org

Blog Network

adjon hozzá egy datepickert egy beviteli mezőhöz a JQuery felhasználói felület használatával

A Datepickers segítségével a felhasználók naptáron keresztül választhatnak dátumot. Ezzel elkerülhető a hibák, amelyeket szinte mindig a rossz dátumbevitel okoz, például a rossz formázás. A jQuery plugin segítségével könnyen hozzáadhat egy datepickert egy beviteli mezőhöz. Számos datepicker bővítmény áll rendelkezésre, de a jQuery UI Datepicker az egyik legjobb, mivel számos testreszabási lehetőséggel rendelkezik.

ebben az oktatóanyagban megmutatjuk, hogyan adhat hozzá egy datepickert egy beviteli mezőhöz a jQuery használatával. Ezzel a datepickerrel minden alkalommal, amikor egy adott beviteli mezőre kattint, megnyílik egy naptár. A felhasználó választhat ebből a naptárból egy dátumot (nap, hónap és év).

Jquery UI

először is fel kell vennünk a jQuery UI könyvtárat a funkciók használatához.

alapvető Datepicker funkciók

ebben a példában megmutatom, hogyan adhat hozzá datepickert egy beviteli mezőhöz.

Javascript kód

meg kell adnunk a beviteli mező azonosítóját datepicker választóként.

$(function(){ $("#datepicker").datepicker();});

HTML kód

amikor a beviteli mezőre összpontosít, interaktív naptár nyílik meg.

<p>Date: <input type="text"></p>

a Datepicker speciális funkciói

a következő sorokban meglátjuk, hogyan lehet A Datepicker fejlettebb használatát az általa kínált több lehetőség révén.

dátumformátum módosítása

alapértelmezés szerint a plugin a HH/NN / ÉÉÉÉ formátumot használja. A DateFormat opcióval igényeinknek megfelelően megváltoztathatjuk a dátum formátumát.

$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});

válassza ki a hónap és év

alapértelmezés szerint a hónapot és az évet a bal és a jobb nyilakkal változtatjuk meg. A changeMonth és changeYear opciókkal megjeleníthetünk egy menüt, amellyel kiválaszthatjuk a hónapot és az évet.

$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});

dátumtartomány korlátozása

a Datepicker segítségével bármilyen dátumot kiválaszthat, de ha korlátozni szeretné ezt, használhatja a minDate és a maxDate opciókat.

$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});

Datepicker from to

a következő példában bemutatom, hogyan kell végrehajtani egy datepickert, amelyben a felhasználónak meg kell adnia egy dátumot és egy dátumot. Ennek a szkriptnek a morzsája az, hogy a dátum, soha nem lehet korábbi, mint a dátum.

HTML kód

a Felhasználó bármilyen dátumot kiválaszthat a Feladó mezőben, de csak egyet választhat ki, amely megegyezik vagy nagyobb, mint a Címzett mező előző értéke.

<p>Date: <input type="text"> TO <input type="text"></p>

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.