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>