Guide
Presets
createDateRangePicker(input, {
presets: ['today', 'yesterday', 'last7', 'last30', 'thisMonth', 'lastMonth', 'thisQuarter', 'yearToDate'],
});
Default list: today, yesterday, last7, last30, thisMonth, lastMonth, yearToDate. Pass
presets: false to hide the list.
| id | Range, if today is Wed 16 Sept 2026 and the week starts on Monday |
|---|---|
today |
16 Sept |
yesterday |
15 Sept |
last7 / last14 / last30 / last90 |
ending 16 Sept |
next7 / next30 |
starting 16 Sept |
thisWeek |
14 – 20 Sept |
lastWeek |
7 – 13 Sept |
thisMonth |
1 – 30 Sept |
lastMonth |
1 – 31 Aug |
monthToDate |
1 – 16 Sept |
thisQuarter |
1 Jul – 30 Sept |
lastQuarter |
1 Apr – 30 Jun |
yearToDate |
1 Jan – 16 Sept |
lastYear |
1 Jan – 31 Dec 2025 |
When presets are worked out. A preset is calculated at the moment it's chosen, in the picker's
timeZone. A dashboard left open overnight therefore gets the new day's "Last 7 days".
Where the week starts. Week presets use the locale's first day of the week: Saturday in Egypt,
Sunday in Saudi Arabia and Pakistan, Monday in the UAE and most of Europe. Pass weekStart to override.
Your own presets
A preset is { id, label, range }. range receives { today, weekStart }, where today is a day
number, and returns [start, end] as day numbers:
import { PRESETS, parseIso } from '@devix-labs/date-range-picker';
createDateRangePicker(input, {
presets: [
{ ...PRESETS.last7, label: 'آخر ٧ أيام' },
{ id: 'fortnight', label: 'Next 14 days', range: ({ today }) => [today, today + 13] },
{ id: 'season', label: 'Summer season', range: () => [parseIso('2026-06-01'), parseIso('2026-08-31')] },
],
});
The active preset is highlighted and exposed with aria-pressed.
Updated 15 Sep 2026