27 вересня 2026 · 8 хв читання

Що нового в RollDate Core 1.4.0: готові діапазони, кольори тем і плавні оновлення

Готові діапазони дат, зрозуміліші дії у футері, налаштування кольорів і оновлення без стрибка календаря.

Швидкий вибір діапазону здається простою функцією, доки в кожному проєкті не доводиться заново реалізовувати «Останні 7 днів», «Цей місяць» або «Від початку кварталу». Логіка дат дублюється, початок тижня залежить від локалі, підписи треба перекладати, а інтерфейс ще має показувати, який пресет відповідає вибраному періоду.

У RollDate Core 1.4.0 цю роботу бере на себе окремий плагін пресетів. У ньому є 28 готових діапазонів, англійські й українські підписи, генератори відносних періодів lastN і nextN, а також активний стан, який синхронізується з поточним вибором.

Реліз також розширює можливості кнопок у футері та виправляє оновлення маркерів дат: календар більше не перебудовується і не стрибає після зміни підсвічених днів. Кольори тем можна перевизначати через публічні CSS-змінні, зокрема колір тексту та іконок на акцентному фоні.

Нижче — те, що справді важливо під час інтеграції нової версії у фронтенд-проєкт.

Встановлення або оновлення RollDate Core

Встановіть актуальну версію пакета:

npm install @rolldate/core@^1.4.0

Плагін пресетів уже входить до @rolldate/core, тому окрема залежність не потрібна. Імпортуйте його через окремий export пакета:

import RollDate from '@rolldate/core'
        import { presets, lastN, nextN } from '@rolldate/core/presets'
        import '@rolldate/core/css/min'

Пресети навмисно винесені з основної точки входу. Якщо готові діапазони не потрібні, проєкт не імпортує їхній каталог.

Готові діапазони дат

Укажіть selectType: 'range', виберіть потрібні діапазони та передайте їх у rangePresets:

import RollDate from '@rolldate/core'
        import { presets } from '@rolldate/core/presets'
        import '@rolldate/core/css/min'

        const reportDates = new RollDate('#report-dates', {
          selectType: 'range',
          presetsLabel: 'Швидкий вибір періоду',
          rangePresets: presets([
            'today',
            'last7',
            'last30',
            'thisMonth',
            'lastMonth',
            'quarterToDate'
          ], {
            locale: 'uk'
          })
        })

Плагін містить 28 діапазонів: окремі дні, тижні, останні або наступні N днів, місяці, квартали та роки. Не потрібно показувати користувачу довгий універсальний список — підключіть лише ті варіанти, які відповідають конкретному інтерфейсу.

Серед доступних ідентифікаторів:

today, yesterday і tomorrow;
thisWeek, lastWeek, nextWeek і weekToDate;
last7, last14, last30, last90, next7, next14 і next30;
thisMonth, lastMonth, nextMonth і monthToDate;
відповідні квартальні та річні варіанти, зокрема quarterToDate, yearToDate і last12Months.

Тижневі пресети за замовчуванням враховують налаштування startWeekFromMonday самого датапікера. Його також можна явно передати в опції плагіна, якщо правила звітного періоду не мають залежати від налаштувань інтерфейсу.

Українські підписи та власні назви

Англійські й українські підписи вже вбудовані:

const bookingDates = new RollDate('#booking-dates', {
          selectType: 'range',
          locale: 'uk',
          presetsLabel: 'Швидкий вибір періоду',
          rangePresets: presets([
            'today',
            'thisWeek',
            'weekend',
            'thisMonth'
          ], {
            locale: 'uk'
          })
        })

Локаль датапікера та мова підписів пресетів задаються окремо. Поведінка залишається явною, а застосунок за потреби може змінити лише мову швидких діапазонів.

Окремі підписи можна перевизначити, не переписуючи обчислення дат:

rangePresets: presets(['last7', 'last30'], {
          locale: 'uk',
          labels: {
            last7: 'Попередні 7 днів',
            last30: 'Попередні 30 днів'
          }
        })

Відносні періоди через `lastN` і `nextN`

Не кожному інтервалу потрібен окремий вбудований ідентифікатор. Генератори lastN і nextN створюють діапазони на потрібну кількість днів, тижнів або місяців:

import { presets, lastN, nextN } from '@rolldate/core/presets'

        const analyticsDates = new RollDate('#analytics-dates', {
          selectType: 'range',
          rangePresets: [
            ...presets(['today', 'last7', 'thisMonth'], { locale: 'uk' }),
            lastN(6, 'month', { label: 'Останні 6 місяців' }),
            nextN(2, 'week', { label: 'Наступні 2 тижні' })
          ]
        })

Ці генератори повертають звичайні об’єкти пресетів RollDate. Вбудовані, відносні та повністю власні діапазони можна використовувати разом в одному масиві.

Власні пресети, як і раніше, описуються через label та getRange:

const currentView = {
          id: 'visible-month',
          label: 'Видимий місяць',
          getRange(picker) {
            const { year, month } = picker.getViewMonth()

            return [
              new Date(year, month, 1),
              new Date(year, month + 1, 0)
            ]
          }
        }

Активний пресет відповідає вибраному діапазону

Кожен згенерований пресет має стабільний ідентифікатор. RollDate додає його в data-preset-id, порівнює діапазон пресета з поточним вибором і позначає збіг:

.RollDate__presets__button--active
        aria-pressed="true"

Це важливо не лише для стилізації. Користувач може вибрати «Останні 7 днів», потім змінити одну з дат вручну або встановити значення через setValue(). Стан кнопки залежить від фактичних дат, а не просто запам’ятовує останній клік.

Групі пресетів можна задати доступну назву через presetsLabel. У вбудованих темах пресети завжди розташовані під календарем, тому додавання футера більше не змінює їхнє положення.

Зрозуміліші дії у футері

Кнопки футера тепер підтримують вигляд посилання, групування ліворуч або праворуч, власні класи, доступні назви та вбудовану дію закриття:

new RollDate('#invoice-period', {
          selectType: 'range',
          closeOnSelect: false,
          footerButtons: [
            {
              text: 'Очистити',
              action: 'clear',
              variant: 'link',
              position: 'left'
            },
            {
              text: 'Скасувати',
              action: 'close',
              variant: 'secondary'
            },
            {
              text: 'Застосувати',
              variant: 'primary',
              ariaLabel: 'Застосувати вибраний період рахунків',
              onClick(picker) {
                const value = picker.getValue()
                updateInvoiceReport(value)
                picker.close()
              }
            }
          ]
        })

Для типового сценарію достатньо action: 'close' — окремий callback не потрібен. className дає власну точку прив’язки для стилів застосунку, а ariaLabel дозволяє додати точнішу доступну назву, якщо видимий текст навмисно короткий.

Налаштування кольорів через CSS-змінні

Вбудовані теми main, light і dark залишаються готовими до використання. Їхню кольорову гаму можна змінити, перевизначивши публічні --rd-* змінні на контейнері датапікера:

.RollDate__container.booking-theme {
          --rd-bg: #fffaf2;
          --rd-text-primary: #2b2118;
          --rd-text-secondary: #6f5d4e;
          --rd-border: #e3d4c4;
          --rd-hover-bg: #f4eadf;
          --rd-accent: #c65d2e;
          --rd-accent-dark: #9f4520;
          --rd-on-accent: #ffffff;
          --rd-range: #f0b49a;
          --rd-range-muted: #fbe6dc;
          --rd-highlight-dot: #247a64;
        }

Додайте власний клас до контейнера у своїй інтеграції та підключіть файл із перевизначеннями після CSS RollDate — інакше потрібні значення може перебити каскад.

Особливо важлива змінна --rd-on-accent. Вона керує кольором тексту й іконок на залитих акцентних елементах, зокрема на крайніх датах діапазону та primary-кнопках футера. Це прибирає типову проблему, коли власний акцентний колір виглядає добре, але жорстко заданий білий текст уже не має достатнього контрасту.

Публічним API стилізації варто вважати саме кольорові токени. Внутрішні змінні розмірів і верстки залишаються деталями реалізації та можуть змінюватися разом із компонентом.

Оновлення маркерів без перебудови календаря

Застосунки часто змінюють маркери після завантаження бронювань, подій або даних про доступність. У версії 1.4.0 методи підсвічування оновлюють видимі точки на місці:

picker.setHighlightDates([
          { date: '2026-10-08', color: '#2563eb' },
          { date: '2026-10-12', colors: ['#16a34a', '#eab308'] }
        ])

        picker.highlightDate('2026-10-18', '#dc2626')
        picker.unhighlightDate('2026-10-08')

Календар зберігає поточний місяць і позицію скролу. Для компонента зі скрол-навігацією це принципово: оновлення даних не повинно перекидати користувача на інший місяць або створювати помітний стрибок.

Підключення у браузері без збирача

Плагін доступний і як браузерний файл. Підключіть його після RollDate Core та використовуйте глобальний об’єкт RollDatePresets:

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

        <script src="https://cdn.jsdelivr.net/npm/@rolldate/core@1.4.0/dist/js/rolldate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@rolldate/core@1.4.0/dist/js/rolldate-presets.min.js"></script>

        <script>
          new RollDate('#date-range', {
            selectType: 'range',
            presetsLabel: 'Швидкий вибір періоду',
            rangePresets: RollDatePresets.presets([
              'today',
              'last7',
              'last30',
              'thisMonth'
            ], {
              locale: 'uk'
            })
          })
        </script>

У production краще фіксувати точну версію, якщо кожне оновлення проходить окрему перевірку. Діапазон за major-версією доречний лише тоді, коли проєкт готовий автоматично отримувати сумісні оновлення.

Що змінилося у версії 1.4.0

Коротко про практичні зміни релізу:

окремий плагін із 28 готовими діапазонами;
англійські й українські підписи пресетів;
генератори відносних діапазонів lastN і nextN;
синхронізований активний стан пресета та aria-pressed;
стабільне розташування пресетів під календарем у вбудованих темах;
гнучкіше розташування, стилізація, дії та доступні назви кнопок футера;
оновлення маркерів на місці без перебудови календаря та стрибка скролу.

Перевизначення кольорів тем і змінна --rd-on-accent з’явилися у версії 1.3.1 та також входять до пакета після оновлення до 1.4.0.

Спробуйте інтерактивне демо RollDate Core, перегляньте повну документацію або встановіть @rolldate/core з npm.