RollDate
npm Get started

Demo

Try RollDate

See what the scrolling date picker can do — switch modes below, then explore highlights, presets, and more. Configure your own in the playground or read the docs.

Selection mode

Single date

More examples

Range

Range (two inputs)

Separate check-in and check-out fields — pass an array of two selectors.

new RollDate(['#ex-range-start', '#ex-range-end'], {
  selectType: 'range'
});

Inline

Inline calendar

Attach to a container (div, section) — always visible, no popup.

<div id="calendar"></div>

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

Trigger

External open button

Keep the input readonly and open the picker from an icon or custom control via triggerSelector.

new RollDate('#ex-trigger', {
  triggerSelector: '#ex-trigger-btn'
});

Themes

Main, dark & light

Three built-in themes — switch tabs to preview the same inline picker with a different skin.

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

Localization

Custom labels

Override month and weekday names; week starts on Monday with rotated Sunday-first headers.

new RollDate('#ex-i18n', {
  locale: 'fr-FR',
  startWeekFromMonday: true,
  monthsNames: [
    'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
  ],
  monthsShortNames: [
    'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun',
    'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'
  ],
  weekDaysNames: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']
});

Highlights

Colored date dots

Mark days with single or multi-color dots via highlightDates — ideal for events and bookings.

new RollDate('#calendar', {
  highlightDates: [
    { date: '15.08.2026', color: '#22c55e' },
    { date: '20.08.2026', colors: ['#ef4444', '#a855f7'] }
  ],
  closeOnSelect: false
});

Presets

Range presets

Quick-select “7 days” or “This month” buttons tied to the visible month or first selected date.

new RollDate('#report', {
  selectType: 'range',
  closeOnSelect: false,
  rangePresets: [
    {
      label: '7 days',
      getRange(picker) {
        const start = picker.selectedDates[0] ?? picker.getViewDate();
        const end = new Date(start);
        end.setDate(end.getDate() + 6);
        return [start, end];
      }
    },
    {
      label: 'This month',
      getRange(picker) {
        const { year, month } = picker.getViewMonth();
        return [new Date(year, month, 1), new Date(year, month + 1, 0)];
      }
    }
  ]
});

Constraints

Min, max & disabled dates

Booking windows with minDate, maxDate, and blocked individual days.

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

new RollDate('#ex-booking', {
  minDate: new Date(),
  maxDate: new Date(Date.now() + 90 * 864e5),
  disabledDates: [tomorrow]
});

Want to tune every option? Open the playground or read the installation guide.