Getting started

A range picker for reports, bookings and filters. It gives you presets, a live preview while choosing, length limits, comparison periods, and values that never shift by a day.

Install#

npm install @devix-labs/date-range-picker

Or from the CDN:

<link rel="stylesheet" href="https://devix.pk/cdn/oss/date-range-picker@1.2.0/date-picker.min.css">
<script type="module">
  import { createDateRangePicker } from 'https://devix.pk/cdn/oss/date-range-picker@1.2.0/index.js';
  createDateRangePicker(document.querySelector('#period'));
</script>

One input#

<label for="period">Period</label>
<input id="period" name="period">

import { createDateRangePicker } from '@devix-labs/date-range-picker';
import '@devix-labs/date-range-picker/styles.css';

const period = createDateRangePicker(document.querySelector('#period'), {
  presets: ['today', 'last7', 'last30', 'thisMonth', 'lastMonth'],
  onChange: ({ start, end }) => loadReport(start, end),
});

The input reads 12 – 18 Sept 2026. The form posts period_start=2026-09-12 and period_end=2026-09-18.

Two inputs#

<input id="check-in" name="check_in">
<input id="check-out" name="check_out">

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

Each input keeps its own name and posts its own ISO date. Clicking either input opens the same calendar.

Choosing a range#

1. First click, or Enter on a day, sets the start.
2. Moving the pointer or the arrow keys previews the range as a band.
3. Second click or Enter sets the end. Choosing an earlier day swaps the ends.

People can also type: 18/9 - 24/9, 1 oct to 3 oct, today – +7d.

Single-date pickers, calendars, typing rules and every shared option are covered in the Date Picker docs. This package is the same engine.