Maybaygiare.org

Blog Network

přidejte datepicker do vstupního pole pomocí jQuery UI

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>

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.