Osvěžující JavaScript Datepicker

• Lehký (méně než 5kb minifikovaný a gzipovaný)
• Žádné závislosti (ale hraje dobře s Moment.js)
• Modulární třídy CSS pro snadné stylování

Vyzkoušejte ukázku Pikaday →

Produkčně připraveno? Od verze 1.0.0 je Pikaday stabilní a používá se v produkci. Pokud však najdete chyby nebo máte požadavky na funkce, pošlete je prosím do trackeru problémů na GitHubu.Podívejte se také na seznam změn

Instalace

Pikaday můžete nainstalovat jako balíček NPM:

npm install pikaday

Nebo přímo odkaz na CDN:

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

Styly

Musíte také zahrnout soubor Pikaday CSS. Tento krok závisí na tom, jak byl Pikaday nainstalován. Buď import z NPM:

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

Nebo odkaz na CDN:

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

Použití

Pikaday lze navázat na vstupní pole:

<input type="text">

Přidejte JavaScript na konec dokumentu:

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

Pokud používáte jQuery, nezapomeňte předat pouze první prvek:

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

Pokud instance Pikaday není vázána na pole, můžete element připojit kamkoli:

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

Formátování

Ve výchozím nastavení jsou data formátována a zpracovávána pomocí standardního objektu Date v jazyce JavaScript.Pokud je v oboru k dispozici Moment.js, použije se k formátování a parsování vstupních hodnot. Do konfigurace můžete předat další volbu format, která bude předána konstruktoru moment Plnou verzi naleznete v příkladu moment.js.

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

Pro pokročilejší a flexibilnější formátování můžete konfiguraci předat vlastní funkci toString, která bude použita pro formátování objektu data. tato funkce má následující signaturu:

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

Měli byste z ní vrátit řetězec.

Buďte však opatrní. Pokud formátovaný řetězec, který vracíte, nelze správně analyzovat metodou Date.parse (nebo moment, pokud je k dispozici), pak musíte v konfiguraci poskytnout vlastní funkci parse. Této funkci bude předán formátovaný řetězec a formát:

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

Konfigurace

Jak ukazují výše uvedené příkladyPikaday má mnoho užitečných možností:

• field svázat datepicker s formulářovým polem
• trigger použít jiný prvek pro spuštění otevření datepickeru, viz příklad spouštěče (výchozí hodnota field)
• bound automaticky zobrazit/skrýt datepicker při zaostření na field (výchozí hodnota true, pokud je nastaven field)
• ariaLabel datový atribut na vstupním poli s pomocným textem aria (platí pouze při nastavení bound)
• position preferovaná pozice datepickeru vzhledem k formulářovému poli, např.g.: top right, bottom right Poznámka: může dojít k automatickému přizpůsobení, aby se datepicker nezobrazoval mimo viewport, viz příklad pozic (výchozí je „vlevo dole“)
• reposition lze nastavit na false, aby nedošlo ke změně pozice datepickeru v rámci viewportu, což jej donutí zaujmout nastavenou position (výchozí:
• container uzel DOM pro vykreslení kalendáře, viz příklad kontejneru (výchozí: nedefinováno)
• format výchozí výstupní formát pro .toString() a field hodnotu (vyžaduje Moment.js pro vlastní formátování)
• formatStrict výchozí příznak pro striktní parsování data Moment (vyžaduje Moment.js pro vlastní formátování)
• toString(date, format) funkce, která bude použita pro vlastní formátování. Tato funkce bude mít přednost před moment.
• parse(dateString, format) funkcí, která bude použita pro parsování vstupního řetězce a získání objektu data z něj. Tato funkce bude mít přednost před moment.
• defaultDate počáteční datum, které se zobrazí při prvním otevření
• setDefaultDate logická hodnota (true/false). aby defaultDate byla počáteční vybraná hodnota
• firstDay první den v týdnu (0: neděle, 1: pondělí atd.)
• minDate minimální/nejstarší datum, které lze vybrat (měl by to být nativní objekt Date – např.např. new Date() nebo moment().toDate())
• maxDate maximální/poslední datum, které lze vybrat (měl by to být nativní objekt Date – např. new Date() nebo moment().toDate())
• disableWeekends zakázat výběr sobot nebo nedělí
• disableDayFn zpětné volání funkce, které se předá objekt Date pro každý zobrazený den. Měla by vrátit true, aby zakázala výběr daného dne.
• yearRange počet let na obou stranách (např. 10) nebo pole horního/dolního rozsahu (např. )
• showWeekNumber zobrazit číslo týdne ISO v záhlaví řádku (výchozí false)
• pickWholeWeek vybrat celý týden místo dne (výchozí false)
• isRTL obrátit kalendář pro výběr zprava nahoru.vlevo
• i18n výchozí jazyk pro názvy měsíců a dnů v týdnu (viz internacionalizace níže)
• yearSuffix další text, který se připojí k roku v nadpisu
• showMonthAfterYear zobrazit měsíc za rokem v nadpisu (výchozí false)
• showDaysInNextAndPreviousMonths zobrazit dny kalendářní mřížky, které spadají do následujícího nebo předchozího měsíce (výchozí: false)
• enableSelectionDaysInNextAndPreviousMonths umožňuje uživateli vybrat datum, které spadá do následujícího nebo předchozího měsíce (výchozí: false)
• numberOfMonths počet viditelných kalendářů
• mainCalendar při použití numberOfMonths pomůže vybrat, kde bude hlavní kalendář (výchozí left, lze nastavit na right). Používá se pouze pro první zobrazení nebo v případě, že vybrané datum ještě není viditelné
• events pole dat, která chcete odlišit od běžných dnů (např. )
• theme definovat název třídy, který lze použít jako háček pro stylování různých témat, viz příklad motivu (výchozí null)
• blurFieldOnSelect definuje, zda se pole při výběru data rozostří (výchozí true)
• onSelect funkce zpětného volání při výběru data
• onOpen funkce zpětného volání při zviditelnění výběrového pole
• onOpen.
• onClose funkce zpětného volání pro případ, že se výběrový seznam skryje
• onDraw funkce zpětného volání pro případ, že výběrový seznam vykreslí nový měsíc
• keyboardInput zapnout podporu zadávání z klávesnice (výchozí true)

Styling

Pokud je konfigurace reposition-.je povolena volba (výchozí), Pikaday použije CSS-třídy na datepicker podle toho, jak je umístěn:

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

Všimněte si, že prvek DOM bude mít v každém okamžiku obvykle 2 třídy CSS (např. top-aligned right-aligned atd.).

Zásuvný modul jQuery

Běžná verze Pikaday nevyžaduje jQuery, nicméně existuje zásuvný modul jQuery, pokud vás to láká (viz plugins/pikaday.jquery.js v repozitáři). Tato verze přirozeně vyžaduje jQuery a lze ji používat stejně jako ostatní zásuvné moduly: Plnou verzi naleznete v příkladu jQuery.

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

Podpora AMD

Pokud používáte modulární zavaděč skriptů, Pikaday není vázán na globální objekt a krásně zapadne do vašeho procesu sestavování. Pikaday můžete vyžadovat stejně jako jakýkoli jiný modul. plnou verzi najdete v příkladu AMD.

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

To samé platí pro výše zmíněný zásuvný modul jQuery. plnou verzi najdete v příkladu AMD jQuery.

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

Podpora modulů CommonJS

Pokud používáte prostředí kompatibilní s CommonJS, můžete k importu Pikaday použít funkci require.

var pikaday = require('pikaday');

Pokud všechny požadované moduly spojíte s Browserify a nepoužíváte Moment.js, zadejte možnost ignorovat:

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

Ruby on Rails

Pokud používáte Ruby on Rails, nezapomeňte se podívat na gem Pikaday.

Metody

Vyhledávač data můžete po vytvoření ovládat:

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

Get and set date

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

Vrátí vybrané datum ve formátu řetězce. Pokud existuje Moment.js (doporučeno), pak Pikaday může vrátit jakýkoli formát, kterému Moment rozumí. můžete také poskytnout vlastní funkci toString a provést formátování sami. Více se dočtete v části o formátování.

Pokud neexistuje objekt moment ani funkce toString, použije se výchozí metoda .toDateString() jazyka JavaScript.

picker.getDate()

Vrátí základní objekt Date jazyka JavaScript vybraného dne nebo null, pokud není žádný výběr.

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

Nastaví aktuální výběr. Ten bude omezen v rámci možností minDate a maxDate, pokud jsou zadány. Jako druhý parametr můžete volitelně předat boolean, který zabrání spuštění zpětného volání onSelect (true), což umožní tiché nastavení data.

picker.getMoment()

Vrátí objekt Moment.js pro vybrané datum (Moment musí být načten před Pikaday).

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

Nastaví aktuální výběr pomocí objektu Moment.js (podrobnosti viz setDate).

Vymazat a vynulovat datum

picker.clear()

Vymaže a vynuluje vstup, na který je picker vázán.

Změnit aktuální zobrazení

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

Změní aktuální zobrazení na zobrazení konkrétního data. Tento příklad skočí na únor 2014 (měsíc je index založený na nule).

picker.gotoToday()

Zkratka pro picker.gotoDate(new Date())

picker.gotoMonth(2)

Změnit aktuální zobrazení podle měsíce (0: leden, 1: únor atd.).

picker.nextMonth()picker.prevMonth()

Přejít na další nebo předchozí měsíc (v případě potřeby se změní rok).

picker.gotoYear()

Změňte zobrazovaný rok.

picker.setMinDate()

Aktualizujte minimální/nejstarší datum, které lze vybrat.

picker.setMaxDate()

Aktualizujte maximální/poslední datum, které lze vybrat.

picker.setStartRange()

Aktualizujte počáteční datum rozsahu. Pro použití dvou instancí Pikaday pro výběr rozsahu dat.

picker.setEndRange()

Aktualizujte datum konce rozsahu. Pro použití dvou instancí Pikaday k výběru rozsahu data.

Zobrazení a skrytí výběrového seznamu data

picker.isVisible()

Vrátí true nebo false.

picker.show()

Zviditelnění výběrového seznamu.

picker.adjustPosition()

Přepočítání a změna polohy výběrového seznamu.

picker.hide()

Skrytí výběrového seznamu, čímž se stane neviditelným.

picker.destroy()

Skryjte vybírač a odstraňte všechny posluchače událostí – není návratu zpět!“

Internacionalizace

Výchozí konfigurační formát i18n vypadá takto:

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

Musíte zadat 12 měsíců a 7 pracovních dnů (se zkratkami). Dny v týdnu zadávejte vždy v tomto pořadí s nedělí na prvním místě. V případě potřeby můžete změnit pořadí pomocí možnosti firstDay (0: neděle, 1: pondělí atd.). Můžete také nastavit isRTL na true pro jazyky, které se čtou zprava doleva.

Rozšíření

Timepicker

Pikaday je čistě datepicker. Nepodporuje výběr denního času. Existují však snahy přidat do Pikaday podporu času. viz #1 a #18. Ty se nacházejí ve vlastním forku.

Můžete použít práci, kterou naposledy udělal @owenmead na adrese owenmead/PikadayJednodušší přístup k výběru času, který udělal @xeeali na adrese xeeali/Pikaday, je založen na verzi 1.2.0.Také @stas má fork stas/Pikaday, ale je již poměrně starý

Kompatibilita s prohlížeči

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

Autoři

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

Děkuji @shoogledesigns za název.