Документація

RollDate — швидкий старт

Українською доступні інструкції зі встановлення та мінімальний приклад. Повний опис API наразі доступний англійською.

RollDate підтримує вибір однієї дати, діапазон, кілька дат і час в одному легкому компоненті зі скролом. Швидкість колеса й тача задається опцією scrollSpeed (1 — типова, 0 — лише стрілки та клавіатура). Інтерактивні приклади — на сторінці демо, генерація коду — у Playground.

Порада

weekDaysNames має починатися з неділі (['Sun','Mon',…]). Якщо startWeekFromMonday має значення true, RollDate автоматично змінює порядок назв днів тижня в заголовку.

const picker = new RollDate(selector, options);

Потрібен планувальник або повний календар подій?

RollDate Events — окремий продукт із поданнями Month, Week, Day і Agenda. Events · Документація Events

Встановлення

Встановіть з npm, підключіть CDN або завантажте окремий ZIP.

npm

npm install @rolldate/core

Import

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

CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolldate/core/dist/css/rolldate.min.css">
<script src="https://cdn.jsdelivr.net/npm/@rolldate/core/dist/js/rolldate.min.js"></script>

Завантажити ZIP

Офлайн-пакет із зібраними файлами dist/ і коротким README — без npm.

Завантажити rolldate.zip

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

Підключіть RollDate до поля введення або контейнера.

HTML + JS

<input id="date" type="text" placeholder="Pick a date" />

new RollDate('#date', {
  theme: 'main',
  enabledDates: [{ repeat: 'weekly', weekdays: [0, 6] }]
});

Доступність дат

enabledDates — allowlist: якщо опцію передано, дозволені лише дати, що збігаються хоча б з одним правилом. Якщо опцію не передано, дозволені всі дати, крім disabledDates і дат поза minDate/maxDate. enabledDates: [] забороняє всі дати. disabledDates — denylist і завжди має останнє слово.

Порядок перевірки: minDate/maxDate → enabledDates → disabledDates. Дні тижня відповідають Date#getDay() (0 — неділя, 6 — субота).

Лише вихідні, з винятками

new RollDate('#date', {
  enabledDates: [{ repeat: 'weekly', weekdays: [0, 6] }],
  disabledDates: [
    '2026-12-26',
    { from: '2027-01-01', to: '2027-01-10' }
  ]
});

Runtime allowlist

picker.setEnabledDates([{ repeat: 'weekly', weekdays: [0, 6] }]);
picker.setEnabledDates([]);
picker.setEnabledDates(undefined);

Заборонити третій четвер місяця

disabledDates: [{ repeat: 'monthly', weekday: 4, occurrence: 3 }]

enableDate лише прибирає точний запис із disabledDates і не може перемогти weekly/monthly/діапазон/callback.

Теми та кольори

RollDate має три готові теми: main, dark і light. Якщо готової палітри недостатньо, перевизначте потрібні CSS-змінні --rd-* під дизайн-систему свого проєкту.

Потрібна власна палітра?

На сторінці CSS-змінних є готовий приклад, список кольорових токенів і значення для кожної теми.

Тема

new RollDate('#date', { theme: 'dark' });
picker.setTheme('light');

Замінити колір

.RollDate__container {
  --rd-accent: #10b981;
  --rd-accent-strong: #059669;
  --rd-on-accent: #042f2e;
}

Повна документація

Українська версія охоплює швидкий старт і правила доступності дат. Повна таблиця параметрів, методів і live-прикладів наразі доступна англійською.

Повна документація англійською