Date ranges

import { createDateRangePicker } from '@devix-labs/date-picker';

const period = createDateRangePicker(document.querySelector('#period'), {
  presets: ['today', 'last7', 'last30', 'thisMonth', 'lastMonth', 'thisQuarter', 'yearToDate'],
  maxLength: 366,
});

period.getRange(); // { start: "2026-09-12", end: "2026-09-18" }

How selecting works#

• First click sets the start. As the pointer or the arrow keys move, a band previews the range.
• Second click sets the end. Clicking an earlier day swaps the ends rather than failing.
• Presets apply at once. They're worked out when chosen, so "Last 7 days" just after midnight means the new day's last seven.
• The footer keeps a running summary: 12 – 18 Sept 2026 · 7 days.

One input or two#

<!-- One input: "12 – 18 Sept 2026". Posts period_start and period_end. -->
<input id="period" name="period">

<!-- Two inputs, each keeping its own name. -->
<input id="check-in" name="check_in">
<input id="check-out" name="check_out">

createDateRangePicker(document.querySelector('#check-in'), { endInput: document.querySelector('#check-out') });

Typing works in both styles. In a single input, 18/9 - 24/9, 18 sep to 24 sep and today – +7d are all understood.

Presets#

Your own presets are objects:

import { PRESETS, parseIso } from '@devix-labs/date-picker';

createDateRangePicker(input, {
  presets: [
    PRESETS.last7,
    { id: 'ramadan', label: 'Ramadan 1447', range: () => [parseIso('2026-02-18'), parseIso('2026-03-19')] },
    // `today` is a day number, so arithmetic is plain addition.
    { id: 'fortnight', label: 'Next 14 days', range: ({ today }) => [today, today + 13] },
  ],
});

Rename the built-in ones by spreading: { ...PRESETS.last7, label: 'آخر ٧ أيام' }.

Confirm before applying#

createDateRangePicker(input, { confirm: true });

Selections and presets stay pending until Apply. Cancel or Escape discards them.

Comparison periods#

Reports often compare a range with the one before it:

import { comparisonRange, parseIso, toIso } from '@devix-labs/date-picker';

comparisonRange(parseIso('2026-09-12'), parseIso('2026-09-18'), 'previousPeriod').map(toIso); // ["2026-09-05", "2026-09-11"]
comparisonRange(parseIso('2026-06-01'), parseIso('2026-06-30'), 'previousPeriod').map(toIso); // ["2026-05-01", "2026-05-31"] — whole months
comparisonRange(parseIso('2026-09-12'), parseIso('2026-09-18'), 'previousYear').map(toIso);   // ["2025-09-12", "2025-09-18"]