Sep 27, 2026 · 8 min read

What’s New in RollDate Core 1.4.0: Date Range Presets, Theme Colors, and Smoother Updates

Add ready-to-use date ranges, clearer footer actions, customizable theme colors, and runtime updates that keep the calendar in place.

Date range presets look simple until every product needs a slightly different version of “Last 7 days,” “This month,” or “Quarter to date.” The date math gets copied between projects, week boundaries depend on locale, labels need translation, and the UI still has to show which preset matches the current selection.

RollDate Core 1.4.0 moves that work into an optional presets plugin. It includes 28 ready-to-use ranges, English and Ukrainian labels, relative lastN and nextN helpers, and an active state that stays synchronized with the selected range.

The release also expands footer actions and fixes runtime highlight updates so that changing day markers no longer rebuilds or moves the calendar. Theme colors can now be overridden through public CSS custom properties, including the foreground color used on accent backgrounds.

This article covers the parts that matter when integrating the release into a real frontend project.

Install or update RollDate Core

Install the current package:

npm install @rolldate/core@^1.4.0

The presets plugin ships with @rolldate/core; it is not a separate dependency. Import it through the package export:

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

Keeping presets outside the core entry point is deliberate. Projects that do not need predefined ranges do not have to import the extra preset catalog.

Add ready-to-use date range presets

Set selectType to range, build the ranges you need, and pass them to 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: 'Quick date ranges',
          rangePresets: presets([
            'today',
            'last7',
            'last30',
            'thisMonth',
            'lastMonth',
            'quarterToDate'
          ], {
            locale: 'en'
          })
        })

The plugin includes 28 ranges covering individual days, weeks, rolling day windows, months, quarters, and years. You choose only the IDs that fit the interface instead of showing a long generic list.

Useful built-in IDs include:

today, yesterday, and tomorrow;
thisWeek, lastWeek, nextWeek, and weekToDate;
last7, last14, last30, last90, next7, next14, and next30;
thisMonth, lastMonth, nextMonth, and monthToDate;
quarter and year equivalents, including quarterToDate, yearToDate, and last12Months.

Week-based presets follow the picker's startWeekFromMonday setting by default. You can also set it directly in the plugin options when a reporting rule must be independent of the visible picker configuration.

Use Ukrainian labels or override individual names

English and Ukrainian labels are built in:

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

The picker locale and the preset-label locale are separate options. This makes the behavior explicit and lets an application override only the preset layer when needed.

Individual labels can be replaced without rebuilding the range calculation:

rangePresets: presets(['last7', 'last30'], {
          locale: 'en',
          labels: {
            last7: 'Previous 7 days',
            last30: 'Previous 30 days'
          }
        })

Build relative ranges with `lastN` and `nextN`

Not every useful interval needs a permanent preset ID. The lastN and nextN helpers create ranges for a number of days, weeks, or months:

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

        const analyticsDates = new RollDate('#analytics-dates', {
          selectType: 'range',
          rangePresets: [
            ...presets(['today', 'last7', 'thisMonth']),
            lastN(6, 'month', { label: 'Last 6 months' }),
            nextN(2, 'week', { label: 'Next 2 weeks' })
          ]
        })

These helpers return ordinary RollDate range preset objects, so built-in, relative, and fully custom presets can be combined in the same array.

Custom presets still use label and getRange:

const currentView = {
          id: 'visible-month',
          label: 'Visible month',
          getRange(picker) {
            const { year, month } = picker.getViewMonth()

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

The active preset follows the selected range

Each generated preset has a stable ID. RollDate renders it as data-preset-id, compares the preset range with the current selection, and marks a match with:

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

This matters for more than styling. A user may choose “Last 7 days,” edit the range manually, or set it through setValue(). The pressed state reflects the current dates instead of remembering only the last button click.

The presets group can be named for assistive technology with presetsLabel. Built-in themes place the presets below the calendar, so adding a footer no longer changes their location.

Create clearer footer actions

Footer buttons now support link styling, left or right grouping, custom classes, accessible labels, and a built-in close action:

new RollDate('#invoice-period', {
          selectType: 'range',
          closeOnSelect: false,
          footerButtons: [
            {
              text: 'Clear',
              action: 'clear',
              variant: 'link',
              position: 'left'
            },
            {
              text: 'Cancel',
              action: 'close',
              variant: 'secondary'
            },
            {
              text: 'Apply',
              variant: 'primary',
              ariaLabel: 'Apply selected invoice period',
              onClick(picker) {
                const value = picker.getValue()
                updateInvoiceReport(value)
                picker.close()
              }
            }
          ]
        })

action: 'close' covers the common case without a custom callback. className is available when an application needs a product-specific hook, while ariaLabel provides a clearer accessible name when the visible text is intentionally short.

Customize theme colors with CSS variables

RollDate's built-in main, light, and dark themes remain ready to use. Their color layer can also be adjusted by overriding public --rd-* properties on the picker container:

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

Add the custom class through the container used by your integration, and load these overrides after the RollDate stylesheet so that the cascade applies them.

The important addition is --rd-on-accent. It controls text and icon color on filled accent surfaces, including selected range endpoints and primary footer buttons. This avoids the common failure where a custom accent looks correct but its hardcoded white foreground no longer has enough contrast.

Only color tokens should be treated as the documented theming surface. Internal sizing and layout variables are implementation details and may change as the component evolves.

Update day highlights without rebuilding the calendar

Applications often update markers after loading bookings, events, or availability data. In 1.4.0, the highlight methods update visible dots in place:

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

The calendar keeps its current view and scroll position. This is especially important in a scroll-first picker: a data refresh should not send the user back to another month or create a visible jump.

Browser usage without a bundler

The plugin is also available as a browser build. Load it after RollDate Core and use the global RollDatePresets object:

<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',
            rangePresets: RollDatePresets.presets([
              'today',
              'last7',
              'last30',
              'thisMonth'
            ])
          })
        </script>

Pin an exact version in production if releases are reviewed before deployment. Use a major-version range only when your project is prepared to receive compatible updates automatically.

What changed in 1.4.0

The practical release summary is:

optional presets plugin with 28 ready ranges;
English and Ukrainian preset labels;
lastN and nextN relative range helpers;
synchronized active preset styling and aria-pressed state;
a stable presets layout below the calendar in built-in themes;
more flexible footer button placement, styling, actions, and accessibility labels;
in-place runtime highlight updates without a calendar rebuild or scroll jump.

Theme color overrides and --rd-on-accent were introduced in 1.3.1 and are included when updating to 1.4.0.

Try the RollDate Core live demo, explore the full documentation, or install @rolldate/core from npm.