Datepickers pomáhají uživatelům vybrat datum prostřednictvím kalendáře. Tím se zabrání chybám téměř vždy způsobeným špatným vstupem data, například špatným formátováním. Pomocí jQuery plugin můžete snadno přidat datepicker do vstupního pole. K dispozici je mnoho pluginů datepicker, ale jQuery UI Datepicker je jedním z nejlepších, protože má mnoho možností přizpůsobení.
v tomto tutoriálu vám ukážeme, jak přidat datepicker do vstupního pole pomocí jQuery. S tímto datepickerem, pokaždé, když kliknete na konkrétní vstupní pole, otevře se kalendář. Uživatel si bude moci vybrat z tohoto kalendáře, datum (den, měsíc a rok).
jQuery UI
nejprve musíme zahrnout knihovnu jQuery UI, abychom mohli používat její funkce.
základní funkce Datepicker
v tomto příkladu vám ukážu, jak přidat datepicker do vstupního pole.
kód Javascript
jako volič datepicker musíme zadat ID vstupního pole.
$(function(){ $("#datepicker").datepicker();});
HTML kód
když se zaměříte na vstupní pole, otevře se Interaktivní kalendář.
<p>Date: <input type="text"></p>
Pokročilé funkce Datepicker
V následujících řádcích se budeme vidět, jak, aby se více pokročilé použití Datepicker pomocí více možností, které nám nabízí.
změnit formát data
ve výchozím nastavení plugin používá formát MM / DD / rrrr. Pomocí možnosti DateFormat můžeme změnit formát data podle našich potřeb.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Vyberte měsíc a rok
ve výchozím nastavení měníme měsíc a rok pomocí šipek vlevo a vpravo. Pomocí možností changeMonth a changeYear můžeme zobrazit nabídku, pomocí které lze vybrat měsíc a rok.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Omezit data rozpětí
S Datepicker můžete vybrat libovolné datum, ale pokud chcete omezit, můžete použít vlastnosti minDate a maxDate možnosti.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker z
V následujícím příkladu si ukážeme, jak implementovat datepicker, ve kterém má uživatel zadat datum od a datum do. Drobeček tohoto skriptu je, že datum do, nikdy nemůže být dříve než datum od.
HTML kód
uživatel si může vybrat libovolné datum v poli Od, ale může vybrat pouze jedno stejné nebo větší než předchozí hodnota v poli Komu.
<p>Date: <input type="text"> TO <input type="text"></p>