Навігація скролом · Без залежностей · TypeScript

JavaScript-компонент для вибору дат зі скролом

Легкий JavaScript-компонент для вибору однієї дати, діапазону, кількох дат і часу.

Природний скрол коліщатком миші, трекпадом або дотиком. Працює у спливному та вбудованому режимах. Без React, Vue і date-бібліотек.

MIT · ~14 KB gzip · Працює з будь-яким стеком

new RollDate('#cal', { theme: 'main' })

~14 KBgzip JS

0залежностей

3режими вибору

3теми

TSтипи

MITліцензія

Чому RollDate

Навігація скролом замість постійного перемикання місяців

Гортайте дні, місяці й роки коліщатком миші або дотиком. На підтримуваних пристроях можна ввімкнути тактильний відгук.

Один компонент підтримує всі режими вибору. За потреби можна додати вибір часу у 12- або 24-годинному форматі та розташувати його збоку або знизу.

Підключаєте JS + CSS. Без Moment, Day.js, React чи UI-кітів. Типи TypeScript уже в пакеті.

Можливості

Підсвічені датиКрапки-маркери, кілька кольорів на день
Пресети діапазонівГотові діапазони, що обчислюються від видимого місяця
ЛокалізаціяВласні назви місяців/днів тижня і формати дат відповідно до локалі
Три темиMain, dark і light — без окремого CSS-фреймворка
Спливний або вбудований режимДо поля введення або всередині будь-якого контейнера
API керуванняopen/close, disable dates, getValue, goToDate та інші методи

Повний список опцій — у документації.

Швидкий старт

app.js

import '@rolldate/core/css/min';
import RollDate from '@rolldate/core';

new RollDate('#date', { theme: 'main' });

Почати npm

Перегляньте інтерактивні приклади або згенеруйте код у Playground.