RollDate
npm Download Get started

Demo

Interactive Scrolling Date Picker Demo

Every major RollDate variation — preview on the left, copy-ready code on the right. Configure your own in the playground or read the full API.

Single

Single date

Default popup mode on one input — the simplest integration.

new RollDate('#ex-single');

Range

Range (one input)

Start and end dates in a single field — great for filters and travel search.

new RollDate('#ex-range', {
  selectType: 'range'
});

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

Multi

Multiple dates

Toggle several days without closing after each tap — use closeOnSelect: false.

new RollDate('#ex-multi', {
  selectType: 'multi',
  closeOnSelect: false
});

Date & time

Date + time (12-hour)

Scrollable hour and minute columns with AM/PM, custom step, and footer actions.

new RollDate('#ex-datetime', {
  enableTime: true,
  use12Hour: true,
  timePosition: 'right',
  timeStep: 5,
  closeOnSelect: false,
  footerButtons: [
    { text: 'Now', action: 'today' },
    { text: 'Apply', variant: 'primary', onClick: (p) => p.close() }
  ]
});

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 download the ZIP for offline use.