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>