Egy frissítő JavaScript Datepicker

• Könnyű (kevesebb mint 5kb kicsinyítve és gzippelve)
• Nincs függőség (de jól játszik a Moment.js)
• Moduláris CSS-osztályok a könnyű formázásért

Try Pikaday Demo →

Production ready? Az 1.0.0 verzió óta a Pikaday stabil és termelésben használatos. Ha azonban hibákat találsz vagy funkcióigényeid vannak, kérjük, küldd el őket a GitHub issue trackerbe.Lásd még a changelog

Telepítés

A Pikadayt telepítheted NPM csomagként:

npm install pikaday

Vagy közvetlenül a CDN-re hivatkozva:

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

Stílusok

A Pikaday CSS fájlt is be kell építened. Ez a lépés a Pikaday telepítésének módjától függ. Vagy importálja az NPM-ből:

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

Vagy hivatkozzon a CDN-re:

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

Használat

A Pikadayt egy beviteli mezőhöz kötheti:

<input type="text">

Adja hozzá a JavaScriptet a dokumentum végéhez:

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

Ha jQuery-t használ, ügyeljen arra, hogy csak az első elemet adja át:

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

Ha a Pikaday példány nincs mezőhöz kötve, akkor az elemet bárhová csatolhatja:

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

Formázás

A dátumok alapértelmezés szerint a dátumokat a szabványos JavaScript Date objektummal formázza és elemzi.Ha a Moment.js elérhető a hatókörben, akkor azt fogja használni a bemeneti értékek formázására és elemzésére. A konfigurációhoz átadhat egy további format opciót, amely a moment konstruktornak lesz átadva.A teljes verzióért lásd a moment.js példát.

<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>

A fejlettebb és rugalmasabb formázás érdekében átadhat egy saját toString függvényt a konfigurációnak, amelyet a dátumobjektum formázására fog használni. ennek a függvénynek a következő a szignója:

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

Egy sztringet kell visszaadnia belőle.

Vigyázzon azonban. Ha a visszaadott formázott karakterláncot nem tudja helyesen elemezni a Date.parse módszer (vagy a moment, ha az rendelkezésre áll), akkor saját parse függvényt kell biztosítanod a configban. Ennek a függvénynek át kell adni a formázott karakterláncot és a formátumot:

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); }});

Konfiguráció

Amint a fenti példák is mutatjákPikaday számos hasznos lehetőséggel rendelkezik:

• field a dátumválasztót egy űrlapmezőhöz köti
• trigger egy másik elemet használ a dátumválasztó megnyitásához, lásd a kiváltási példát (alapértelmezett field)
• bound automatikusan megjeleníti/elrejti a dátumválasztót a field fókuszálásakor (alapértelmezett true, ha field van beállítva)
• ariaLabel adat-attribútum a beviteli mezőn aria assistance text (csak akkor alkalmazható, ha bound van beállítva)
• position a dátumválasztó preferált pozíciója az űrlapmezőhöz képest, e.g.: top right, bottom right Megjegyzés: automatikus beállításra kerülhet sor, hogy a dátumválasztó ne jelenjen meg a nézetablakon kívül, lásd a pozíciók példáját (alapértelmezett “bal alsó”)
• reposition hamisra állítható, hogy a dátumválasztó ne kerüljön át a nézetablakon belülre, hanem a konfigurált position pozíciót vegye fel (alapértelmezett: true)
• container DOM csomópont a naptár megjelenítéséhez, lásd a konténer példáját (alapértelmezett: undefined)
• format az alapértelmezett kimeneti formátum a .toString() és field értékhez (szükséges Moment.js az egyéni formázáshoz)
• formatStrict az alapértelmezett flag a Moment szigorú dátumelemzéséhez (egyéni formázáshoz Moment.js szükséges)
• toString(date, format) függvény, amelyet az egyéni formázáshoz használunk. Ez a függvény elsőbbséget élvez a moment.
• parse(dateString, format) függvénnyel szemben, amely a bemeneti karakterlánc elemzésére és a dátumobjektum kinyerésére szolgál. Ez a függvény elsőbbséget élvez a moment-vel szemben.
• defaultDate az első megnyitáskor megjelenítendő kezdeti dátum
• setDefaultDate Boolean (true/false). a defaultDate legyen a kezdeti kiválasztott érték
• firstDay a hét első napja (0: vasárnap, 1: hétfő, stb.)
• minDate a legkisebb/legkorábbi dátum, amelyet ki lehet választani (ennek natív Date objektumnak kell lennie – e.pl. new Date() vagy moment().toDate())
• maxDate a maximális/legkésőbbi dátum, amelyet ki lehet választani (ennek egy natív Date objektumnak kell lennie – pl. new Date() vagy moment().toDate())
• disableWeekends szombat vagy vasárnap kiválasztásának tiltása
• disableDayFn callback függvény, amely minden egyes naphoz kap egy Date objektumot a nézetben. Az adott nap kiválasztásának letiltásához true-t kell visszaadnia.
• yearRange az évek száma mindkét oldalon (pl. 10) vagy a felső/alsó tartomány tömbje (pl. )
• showWeekNumber az ISO-hét számának megjelenítése a sor elején (alapértelmezett false)
• pickWholeWeek egy egész hét kiválasztása egy nap helyett (alapértelmezett false)
• isRTL a naptár megfordítása a jobbról jobbra mutató naptárhoz.balra fordítva
• i18n a hónapok és a hétköznapok nevének nyelvi alapértelmezése (lásd a nemzetköziesítést alább)
• yearSuffix a címben az évszámhoz csatolandó kiegészítő szöveg
• showMonthAfterYear a címben az évszám utáni hónap megjelenítése (alapértelmezett false)
• showDaysInNextAndPreviousMonths a következő vagy előző hónapra eső napok megjelenítése a naptárrácsban (alapértelmezett: false)
• enableSelectionDaysInNextAndPreviousMonths lehetővé teszi a felhasználó számára a következő vagy előző hónapokra eső dátum kiválasztását (alapértelmezett: false)
• numberOfMonths a látható naptárak száma
• mainCalendar ha numberOfMonths van használva, ez segít kiválasztani, hogy hol lesz a fő naptár (alapértelmezett left, beállítható right). Csak az első megjelenítésnél használatos, vagy ha a kiválasztott dátum még nem látható
• events olyan dátumok tömbje, amelyeket meg szeretne különböztetni a szokásos napoktól (pl. )
• theme definiáljon egy osztálynevet, amely kampóként használható a különböző témák stílusának kialakításához, lásd a téma példáját (alapértelmezett null)
• blurFieldOnSelect meghatározza, hogy a mező elmosódik-e, ha egy dátumot választ ki (alapértelmezett true)
• onSelect callback funkció a dátum kiválasztásakor
• onOpen callback funkció, amikor a választó láthatóvá válik

.

• onClose visszahívási függvény, amikor a kiválasztó elrejtődik
• onDraw visszahívási függvény, amikor a kiválasztó új hónapot rajzol
• keyboardInput billentyűzetes bevitel támogatásának engedélyezése (alapértelmezett true)

Stílusozás

Ha a reposition konfigurációban-opció engedélyezve van (alapértelmezett), A Pikaday CSS-osztályokat fog alkalmazni a dátumkijelzőre aszerint, hogy hogyan van elhelyezve:

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

Megjegyezzük, hogy a DOM elem mindenkor jellemzően 2 CSS-osztállyal rendelkezik (pl. top-aligned right-aligned stb.).

jQuery plugin

A Pikaday normál verziója nem igényel jQuery-t, azonban van egy jQuery plugin, ha ez megtetszik (lásd plugins/pikaday.jquery.js az adattárban). Ez a verzió természetesen megköveteli a jQuery-t, és ugyanúgy használható, mint a többi plugin: Lásd a jQuery példát a teljes verzióért.

<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 támogatás

Ha moduláris script betöltőt használsz, a Pikaday nem kötődik a globális objektumhoz, és szépen illeszkedik a build folyamatba. A Pikadayt ugyanúgy igényelheted, mint bármely más modult.

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

A fent említett jQuery pluginra ugyanez vonatkozik.

require(, function($) { $('#datepicker').pikaday();});

CommonJS modultámogatás

Ha CommonJS kompatibilis környezetet használsz, akkor a require függvényt használhatod a Pikaday importálására.

var pikaday = require('pikaday');

Ha az összes szükséges modult a Browserify segítségével csomagolja, és nem használja a Moment.js-t, adja meg az ignore opciót:

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

Ruby on Rails

Ha Ruby on Rails-t használ, mindenképpen nézze meg a Pikaday gemet.

Módszerek

A dátumválasztót a létrehozás után vezérelheti:

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

Get and set date

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

A kiválasztott dátumot string formátumban adja vissza. Ha létezik Moment.js (ajánlott), akkor a Pikaday bármilyen formátumot vissza tud adni, amit a Moment megért. megadhatod a saját toString függvényedet is, és elvégezheted a formázást magad. Bővebben a formázás szakaszban olvashat.

Ha sem moment objektum nem létezik, sem toString függvényt nem adunk meg, a JavaScript alapértelmezett .toDateString() módszerét fogja használni.

picker.getDate()

A kiválasztott nap alap JavaScript Date objektumát adja vissza, vagy null, ha nincs kiválasztás.

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

Az aktuális kiválasztás beállítása. Ez a minDate és maxDate opciók határain belül lesz korlátozva, ha azok meg vannak adva. Opcionálisan átadhat egy boolean értéket második paraméterként, hogy megakadályozza az onSelect callback kiváltását (true), így a dátum beállítása némán történik.

picker.getMoment()

A kiválasztott dátum Moment.js objektumát adja vissza (a Momentet a Pikaday előtt kell betölteni).

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

Beállítja az aktuális kijelölést egy Moment.js objektummal (részletekért lásd setDate).

Törli és visszaállítja a dátumot

picker.clear()

Törli és visszaállítja a bemenetet, amelyhez a picker kötődik.

Jelenlegi nézet megváltoztatása

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

Az aktuális nézet megváltoztatása egy adott dátum megtekintéséhez. Ebben a példában 2014 februárjára ugrik (a hónap nulla alapú index).

picker.gotoToday()

Rövidzárlat picker.gotoDate(new Date())

picker.gotoMonth(2)

Az aktuális nézet módosítása hónapok szerint (0: január, 1: február stb.).

picker.nextMonth()picker.prevMonth()

A következő vagy előző hónapra lép (ez szükség esetén az évet is megváltoztatja).

picker.gotoYear()

Módosítja a megtekintett évet.

picker.setMinDate()

Frissíti a legkisebb/legkorábbi kiválasztható dátumot.

picker.setMaxDate()

Frissíti a legnagyobb/legkésőbbi kiválasztható dátumot.

picker.setStartRange()

Frissíti a tartomány kezdő dátumát. Két Pikaday példány használatához egy dátumtartomány kiválasztásához.

picker.setEndRange()

A tartomány végdátumának frissítése. Két Pikaday példány használatához egy dátumtartomány kiválasztásához.

Dátumválasztó megjelenítése és elrejtése

picker.isVisible()

Visszaadja true vagy false.

picker.show()

A dátumválasztó láthatóvá tétele.

picker.adjustPosition()

A dátumválasztó pozíciójának újraszámítása és módosítása.

picker.hide()

A dátumválasztó elrejtése láthatatlanná téve.

picker.destroy()

Rejtse el a választót, és távolítsa el az összes eseményhallgatót – nincs visszaút!

Nemzetköziesítés

Az alapértelmezett i18n konfigurációs formátum így néz ki:

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

12 hónapot és 7 hétköznapot kell megadnia (rövidítésekkel). A hétköznapokat mindig ebben a sorrendben adja meg, a vasárnappal az első helyen. Szükség esetén a firstDay opciót megváltoztathatja a sorrend megváltoztatására (0: vasárnap, 1: hétfő stb.). A isRTL beállítható true-re is olyan nyelvek esetén, amelyeket jobbról balra olvasnak.

Bővítések

Timepicker

A Pikaday egy tiszta datepicker. Nem támogatja a napszak kiválasztását. Törekvések történtek azonban arra, hogy a Pikadayt kiegészítsék az időpont-támogatással. lásd #1 és #18. Ezek egy saját forkban vannak.

Az @owenmead által nemrég végzett munkát használhatod az owenmead/Pikaday oldalonAz egyszerűbb időválasztási megközelítés, amit @xeeali készített az xeeali/Pikaday oldalon, az 1. verzión alapul.2.0.Szintén @stasnak van egy forkja stas/Pikaday, de már elég régi

Böngésző kompatibilitás

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

Szerzők

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

Thanks to @shoogledesigns for the name.