Virkistävä JavaScript Datepicker

• Kevytrakenteinen (alle 5kb pienennettyinä ja gzipattuina)
• Ei ole riippuvuuksia (mutta pelaa kuitenkin hyvin Moment.js)
• Modulaariset CSS-luokat helppoon muotoiluun

Kokeile Pikaday Demo →

Tuotantovalmis? Versiosta 1.0.0 lähtien Pikaday on vakaa ja sitä käytetään tuotannossa. Jos kuitenkin löydät virheitä tai sinulla on ominaisuuspyyntöjä, lähetä ne GitHubin ongelmanseurantaan.Katso myös changelog

Asennus

Voit asentaa Pikadayn NPM-pakettina:

npm install pikaday

Vai linkitä suoraan CDN:ään:

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Tyylit

Tarpeesi on myös sisällyttää Pikadayn CSS-tiedosto. Tämä vaihe riippuu siitä, miten Pikaday asennettiin. Joko tuonti NPM:stä:

@import './node_modules/pikaday/css/pikaday.css';

Vai linkki CDN:ään:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

Käyttö

Pikaday voidaan sitoa syöttökenttään:

<input type="text">

Add the JavaScript to the end of your document:

<script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker') });</script>

Jos käytät jQuerya varmista, että välität vain ensimmäisen elementin:

var picker = new Pikaday({ field: $('#datepicker') });

Jos Pikaday-instanssia ei ole sidottu kenttään, voit liittää elementin mihin tahansa:

var field = document.getElementById('datepicker');var picker = new Pikaday({ onSelect: function(date) { field.value = picker.toString(); }});field.parentNode.insertBefore(picker.el, field.nextSibling);

Muotoilu

Oletusarvoisesti päivämäärät muotoillaan ja jäsennetään JavaScriptin tavallisen Date-objektin avulla.Jos Moment.js on käytettävissä scope-alueella, sitä käytetään syöttöarvojen muotoiluun ja jäsentämiseen. Voit välittää konfiguraatioon ylimääräisen format-vaihtoehdon, joka välitetään moment-konstruktorille.Katso moment.js-esimerkki.

<input type="text" value="9 Oct 2014"><script src="moment.js"></script><script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D MMM YYYY', onSelect: function() { console.log(this.getMoment().format('Do MMMM YYYY')); } });</script>

Kehittyneempään ja joustavampaan muotoiluun voit välittää konfiguraatioon oman toString-funktion, jota käytetään päivämäärän objektin muotoiluun.Tällä funktiolla on seuraava allekirjoitus:

toString(date, format = 'YYYY-MM-DD')

Tästä funktiosta kannattaa palauttaa merkkijono.

Varoittelehan kuitenkin. Jos palauttamaasi muotoiltua merkkijonoa ei voida jäsentää oikein Date.parse-metodilla (tai moment-metodilla, jos se on käytettävissä), sinun on annettava konfiguraatiossa oma parse-funktiosi. Tälle funktiolle välitetään muotoiltu merkkijono ja muoto:

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D/M/YYYY', toString(date, format) { // you should do formatting based on the passed format, // but we will just return 'D/M/YYYY' for simplicity const day = date.getDate(); const month = date.getMonth() + 1; const year = date.getFullYear(); return `${day}/${month}/${year}`; }, parse(dateString, format) { // dateString is the result of `toString` method const parts = dateString.split('/'); const day = parseInt(parts, 10); const month = parseInt(parts, 10) - 1; const year = parseInt(parts, 10); return new Date(year, month, day); }});

Konfiguraatio

Kuten yllä olevat esimerkit osoittavatPikadayllä on monia hyödyllisiä vaihtoehtoja:

• field sido päivämääränvalitsin lomakekenttään
• trigger käytä eri elementtiä päivämääränvalitsimen avaamisen käynnistämiseen, katso laukaisuesimerkki (oletusarvo field)
• bound näytä/piilota päivämääränvalitsin automaattisesti field tarkennuksen yhteydessä (oletusarvo true, jos field on asetettu)
• ariaLabel data-attribuutti syöttökentässä, jossa on aria-avustusteksti (käytetään vain, kun bound on asetettu)
• position päivämääränvalitsimen mieluisin sijainti lomakekenttään nähden, esim.g.: top right, bottom right Huomaa: automaattinen säätö voi tapahtua, jotta päivämääränvalitsin ei näkyisi näkymäikkunan ulkopuolella, ks. esimerkki sijainneista (oletusarvo ’alhaalla vasemmalla’)
• reposition voidaan asettaa arvoksi false, jolloin päivämääränvalitsinta ei aseteta uudelleen näkymäikkunan sisäpuolelle, vaan sen on pakko ottaa konfiguroitu position (oletusarvo: true)
• container DOM-solmu, johon kalenteri renderöidään, katso kontti-esimerkki (oletus: määrittelemätön)
• format oletusarvoinen tulostusmuoto .toString()– ja field-arvoille (vaatii Moment.js mukautettua muotoilua varten)
• formatStrict oletuslippu momentin tiukalle päivämäärän jäsennykselle (vaatii Moment.js:n mukautettua muotoilua varten)
• toString(date, format) funktio, jota käytetään mukautettua muotoilua varten. Tämä funktio on etusijalla moment:een nähden.
• parse(dateString, format) funktio, jota käytetään syötetyn merkkijonon jäsentämiseen ja päivämääräobjektin saamiseen siitä. Tämä funktio on etusijalla moment:een nähden.
• defaultDate alkupäivämäärä, joka näytetään, kun se avataan ensimmäisen kerran
• setDefaultDate Boolean (true/false). tee defaultDate valituksi alkuarvoksi
• firstDay viikon ensimmäinen päivä (0: sunnuntai, 1: maanantai jne.)
• minDate pienin/varhaisin päivämäärä, joka voi olla valittuna (tämän pitäisi olla natiivi Date-objekti – esim.esim. new Date() tai moment().toDate())
• maxDate suurin/viimeisin päivämäärä, joka voidaan valita (tämän tulisi olla natiivi Date-objekti – esim. new Date() tai moment().toDate())
• disableWeekends kielletään lauantaiden tai sunnuntaiden valinta
• disableDayFn callback-funktio, jolle välitetään Date-objekti jokaiselle näkymässä olevalle päivälle. Pitäisi palauttaa true estääkseen kyseisen päivän valinnan.
• yearRange vuosilukujen määrä jommallakummalla puolella (esim. 10) tai ylä-/alarajojen joukko (esim. )
• showWeekNumber näyttää ISO-viikkonumeron rivin alussa (oletus false)
• pickWholeWeek valitsee kokonaisen viikon päivän sijaan (oletus false)
• isRTL kääntää kalenterin oikealta oikealle.vasemmanpuoleisille kielille
• i18n kielen oletusarvot kuukauden ja viikonpäivien nimille (katso kansainvälistäminen alla)
• yearSuffix lisäteksti, joka liitetään otsikon vuosilukuun
• showMonthAfterYear kuun esittäminen otsikon vuosiluvun jälkeen (oletusarvo false)
• showDaysInNextAndPreviousMonths kalenterin ruudukon päivien esittäminen seuraavalle tai edelliselle kuukaudelle (oletusarvo: false)
• enableSelectionDaysInNextAndPreviousMonths antaa käyttäjän valita päivämäärän, joka on seuraavassa tai edellisessä kuukaudessa (oletus: false)
• numberOfMonths näkyvien kalenterien määrä
• mainCalendar kun käytetään numberOfMonths, tämä auttaa valitsemaan, missä pääkalenteri on (oletusarvo left, voidaan asettaa right). Käytetään vain ensimmäistä näyttöä varten tai kun valittu päivämäärä ei ole jo näkyvissä
• events joukko päivämääriä, jotka haluat erottaa tavallisista päivistä (esim. )
• theme määritä luokkanimi, jota voidaan käyttää koukkuna eri teemojen muotoilussa, katso teemaesimerkki (oletus null)
• blurFieldOnSelect määrittelee, onko kenttä sumea, kun päivämäärä valitaan (oletus true)
• onSelect callback-funktio, kun päivämäärä valitaan
• onOpen callback-funktio, kun valitsin tulee näkyviin
• onClose callback-funktio, kun poiminta on piilotettu
• onDraw callback-funktio, kun poiminta piirtää uuden kuukauden
• keyboardInput ota käyttöön näppäimistösyötön tuki (oletusarvo true)

Muotoilu

Jos konfiguraatio reposition–vaihtoehto on käytössä (oletus), Pikaday soveltaa päivämääränvalitsimeen CSS-luokkia sen mukaan, miten se on sijoitettu:

• top-aligned
• left-aligned
• right-aligned
• bottom-aligned

Huomaa, että DOM-elementillä on milloin tahansa tyypillisesti 2 CSS-luokkaa (esim. top-aligned right-aligned jne.).

jQuery Plugin

Pikadayn normaali versio ei vaadi jQuerya, mutta on olemassa jQuery-plugin, jos se kelluttaa venettäsi (katso plugins/pikaday.jquery.js arkistossa). Tämä versio vaatii luonnollisesti jQueryn, ja sitä voidaan käyttää kuten muitakin plugineja: Katso jQuery-esimerkki.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="pikaday.js"></script><script src="plugins/pikaday.jquery.js"></script><script>// activate datepickers for all elements with a class of `datepicker`$('.datepicker').pikaday({ firstDay: 1 });// chain a few methods for the first datepicker, jQuery style!$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);</script>

AMD-tuki

Jos käytät modulaarista skriptinlastajaa, Pikaday ei ole sidottu globaaliin objektiin, ja se sopii mukavasti rakentamisprosessiisi. Voit vaatia Pikadayn aivan kuten minkä tahansa muunkin moduulin.

require(, function(Pikaday) { var picker = new Pikaday({ field: document.getElementById('datepicker') });});

Sama pätee myös edellä mainittuun jQuery-liitännäiseen.

Jos käytät CommonJS-yhteensopivaa ympäristöä, voit käyttää require-funktiota Pikadayn tuomiseen.

var pikaday = require('pikaday');

Kun niputat kaikki tarvittavat moduulit Browserifyn kanssa etkä käytä Moment.js:ää, määritä ignore-vaihtoehto:

browserify main.js -o bundle.js -i moment

Ruby on Rails

Jos käytät Ruby on Railsia, tutustu Pikadayn helmiin.

Metodit

Voit hallita päivämääränvalitsinta luomisen jälkeen:

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Get and set date

picker.toString('YYYY-MM-DD')

Palauttaa valitun päivämäärän merkkijonomuodossa. Jos Moment.js on olemassa (suositellaan), Pikaday voi palauttaa minkä tahansa muodon, jota Moment ymmärtää. voit myös tarjota oman toString-funktion ja tehdä muotoilun itse. Lue lisää muotoiluosiosta.

Jos moment-objektia ei ole olemassa eikä toString-funktiota anneta, käytetään JavaScriptin oletusmenetelmää .toDateString().

picker.getDate()

Palauttaa valitun päivän JavaScriptin Date-perusobjektin tai null, jos ei ole valittuna.

picker.setDate('2015-01-01')

Asettaa nykyisen valinnan. Tämä rajoitetaan minDate– ja maxDate-valintojen rajoissa, jos ne on määritetty. Voit valinnaisesti antaa toisena parametrina booleanin, joka estää onSelect-kutsun takaisinkutsun käynnistymisen (true), jolloin päivämäärä voidaan asettaa äänettömästi.

picker.getMoment()

Palauttaa Moment.js-objektin valitulle päivämäärälle (Momentin on oltava ladattu ennen Pikadayta).

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

Asettaa nykyisen valinnan Moment.js-objektilla (katso setDate lisätietoja).

Tyhjentää ja nollaa päivämäärän

picker.clear()

Tyhjentää ja nollaa syötteen, johon poiminta on sidottu.

Muuta nykyistä näkymää

picker.gotoDate(new Date(2014, 1))

Vaihtaa nykyistä näkymää nähdäksesi tietyn päivämäärän. Tämä esimerkki hyppää helmikuuhun 2014 (kuukausi on nollapohjainen indeksi).

picker.gotoToday()

Lyhytvalinta picker.gotoDate(new Date())

picker.gotoMonth(2)

Vaihda nykyistä näkymää kuukauden mukaan (0: tammikuu, 1: helmikuu jne.).

picker.nextMonth()picker.prevMonth()

Siirtyminen seuraavaan tai edeltävään kuukauteen (tämä vaihtaa tarvittaessa vuotta).

picker.gotoYear()

Vaihda tarkasteltava vuosi.

picker.setMinDate()

Päivitä valittavissa oleva pienin/varhaisin päivämäärä.

picker.setMaxDate()

Päivitä valittavissa oleva suurin/viimeisin päivämäärä.

picker.setStartRange()

Päivitä vaihteluvälien aloituspäivä. Kahden Pikaday-instanssin käyttäminen päivämäärävälin valitsemiseen.

picker.setEndRange()

Päivitä alueen loppupäivämäärä. Käytettäessä kahta Pikaday-instanssia päivämäärävälin valitsemiseen.

Näytä ja piilota päivämääräpainike

picker.isVisible()

Palauttaa true tai false.

picker.show()

Tee poimintaikkunan näkyviin.

picker.adjustPosition()

Muuttaa poimintaikkunan sijainnin.

picker.hide()

Piilottaa poimintaikkunan tekemällä siitä näkymättömän.

picker.destroy()

Piilota poiminta ja poista kaikki tapahtumakuuntelijat – ei paluuta takaisin!

Kansainvälistäminen

Oletusasetusten i18n muoto näyttää tältä:

i18n: { previousMonth : 'Previous Month', nextMonth : 'Next Month', months : , weekdays : , weekdaysShort : }

Sinun on annettava 12 kuukautta ja 7 arkipäivää (lyhenteillä). Määritä viikonpäivät aina tässä järjestyksessä, sunnuntai ensin. Voit muuttaa firstDay-vaihtoehtoa järjestyksen muuttamiseksi tarvittaessa (0: sunnuntai, 1: maanantai jne.). Voit myös asettaa isRTL:n true:ksi kielille, joita luetaan oikealta vasemmalle.

Laajennukset

Timepicker

Pikaday on puhdas datepicker. Se ei tue kellonajan valitsemista. Pikadayhin on kuitenkin pyritty lisäämään kellonaikatuki. katso #1 ja #18. Nämä sijaitsevat omassa haarassaan.

Voit käyttää työtä, jonka @owenmead teki hiljattain osoitteessa owenmead/PikadayYksinkertaisempi ajanvalintatapa, jonka @xeeali teki osoitteessa xeeali/Pikaday, perustuu versioon 1.2.0.Myös @stasilla on haarukka stas/Pikaday, mutta se on nyt melko vanha

Selainyhteensopivuus

• IE 7+
• Chrome 8+
• Firefox 3.5+
• Safari 3+
• Opera 10.6+

Kirjoittajat

• David Bushell https://dbushell.com @dbushell
• Ramiro Rikkert GitHub @RamRik

Kiitos @shoogledesignsille nimestä.