Gregory v0.3.0 Demo Příručka API GitHub

Datum, rozsah i čas
v jednom pickeru.

Gregory je framework-agnostický výběr data ve vanilla TypeScriptu. Žádné runtime závislosti, jedno jádro — a k němu dvě API: obyčejná třída pro imperativní kód a <gregory-picker> pro HTML.

vanilla TS · ESM + UMD 0 závislostí ~20 kB gzip Web Component MIT
▶ Živé demo Příručka API dokumentace GitHub 
// npm i @svatekr70/gregory
import { Gregory } from '@svatekr70/gregory'
import '@svatekr70/gregory/style.css'

const picker = new Gregory('#vstup', {
  mode: 'range',
  locale: 'cs',
  maxSpan: 31,
})

picker.on('apply', ({ value }) => {
  console.log(value.from, value.to)
})

Nebo deklarativně v HTML: <gregory-picker mode="range" locale="cs">

Vyzkoušej to hned

Skutečná komponenta, ne obrázek. Klikni na začátek a konec rozsahu.

zatím nic nevybráno

Co umí

Všechno, co od pickeru data v praxi potřebuješ — a nic navíc.

🗓

Osm režimů

Jedno datum, rozsah, datum s časem, rozsah s časem, seznam dnů, měsíc, čtvrtletí a rok. Stejné API, přepíná se jedinou volbou mode.

⚡

Přednastavené rozsahy

Dnes, Posledních 7 dní, Tento měsíc… Vyhodnocují se líně, takže picker otevřený přes půlnoc nevrátí včerejšek. Vlastní presety jedním polem.

↔

Rozsahy pod kontrolou

Náhled při přejíždění myší, automatické otočení pozpátku vybraného rozsahu a maxSpan, který zbytek kalendáře rovnou zašedne.

🧩

Dvě API, jedno jádro

Třída Gregory pro imperativní kód, custom element <gregory-picker> pro HTML. Element je jen tenká obálka — žádná druhá implementace.

🌍

Lokalizace

Názvy měsíců, dnů, první den v týdnu i formát data řeší Intl, takže fungují všude. Popisky tlačítek má knihovna pro osm jazyků a další jde doplnit jedním voláním.

⌨

Klávesnice

Šipky po dnech a týdnech, PageUp/PageDown po měsících, Enter vybírá, Escape zavírá a vrací původní hodnotu. Mřížka má role="grid".

🎨

Motiv přes proměnné

Barvy, rádiusy i mezery jsou CSS proměnné na .gr. Není potřeba přebíjet jediný selektor. Tmavý režim automaticky.

🧮

Poctivá datová aritmetika

ISO řetězce se parsují v lokálním čase, ne jako UTC půlnoc. Oba konce rozsahu jsou inkluzivní, 31. leden + měsíc je 28. února.

✓

Otestováno

331 testů ve Vitestu nad jádrem i nad DOM, pokrytí přes 90 % příkazů. Prahy hlídá vitest --coverage, takže nemůžou tiše klesnout.

Režimy

date range datetime datetime-range

Události

change apply cancel open close month-change

Nasadíš to za minutu

Jeden import, jedna třída. Zbytek jsou volby, které nemusíš použít.

▶ Otevřít demo Příručka API reference Zdrojový kód