Maybaygiare.org

Blog Network

lisää datepicker syöttökenttään käyttämällä jQuery UI

Datepickers auttaa käyttäjiä valitsemaan päivämäärän kalenterin kautta. Näin vältetään virheet lähes aina aiheuttama huono päivämäärä syöttö, kuten huono muotoilu. Käyttämällä jQuery plugin voit helposti lisätä datepicker syöttökenttään. On olemassa monia datepicker plugins saatavilla, mutta jQuery UI Datepicker on yksi parhaista, koska se on monia muokkausvaihtoehtoja.

tässä opetusohjelmassa näytämme, miten voit lisätä datepickerin syöttökenttään jQueryn avulla. Tämän datepickerin avulla kalenteri aukeaa aina, kun tiettyä syöttökenttää napsautetaan. Käyttäjä voi valita tästä kalenterista päivämäärän (päivä, kuukausi ja vuosi).

Jquery UI

ensinnäkin meidän on sisällytettävä jQuery UI-kirjasto, jotta voimme käyttää sen toimintoja.

Basic Datepicker-toiminto

tässä esimerkissä näytän, miten datepicker lisätään syöttökenttään.

Javascript-koodi

meidän täytyy määrittää syöttökentän tunnus datepickerin valitsimeksi.

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

HTML-koodi

kun keskityt syöttökenttään, aukeaa interaktiivinen kalenteri.

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

Datepickerin Advanced functionality

seuraavilla riveillä nähdään, miten Datepickeriä voidaan käyttää kehittyneemmin sen tarjoamien useiden vaihtoehtojen kautta.

Muutospäivämuoto

oletuksena liitännäinen käyttää MM / pp / vvvv-muotoa. Käyttämällä DateFormat vaihtoehto voimme muuttaa päivämäärän muodossa tarpeidemme mukaan.

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

Valitse kuukausi ja vuosi

oletuksena vaihdetaan kuukausi ja vuosi vasemmalla ja oikealla nuolinuolella. ChangeMonth – ja changeYear-valinnoilla voimme näyttää valikon, jolla voit valita kuukauden ja vuoden.

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

Rajoita päivämääräaluetta

Datepickerillä voit valita minkä tahansa päivämäärän, mutta jos haluat rajoittaa tätä, voit käyttää minDate-ja maxDate-vaihtoehtoja.

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

Datepicker from –

seuraavassa esimerkissä näytän, miten toteutetaan datepicker, johon käyttäjän on syötettävä päivämäärä, ja päivämäärä, johon. Murunen tämän käsikirjoituksen on, että päivämäärä, ei voi koskaan olla aikaisemmin kuin päivämäärä.

HTML-koodi

käyttäjä voi valita mistä tahansa päivämäärästä, mutta voi valita vain yhden, joka on yhtä suuri tai suurempi kuin edellinen arvo To-kentässä.

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

Vastaa

Sähköpostiosoitettasi ei julkaista.