Presets
Quick-select shortcuts for single dates and ranges.
Pass presets to render quick-select shortcuts beside the calendar. The library ships
ready-made sets and a helper to build your own.
Single-date presets
Select…
import { DateTimePicker, singleDatePresets } from "react-smart-datetime";
<DateTimePicker mode="date" presets={singleDatePresets} showWeekNumbers />;Range presets
Select…
import { DateTimePicker, rangePresets } from "react-smart-datetime";
<DateTimePicker range mode="date" monthsToShow={2} presets={rangePresets} />;Custom presets
A preset is a label plus a value — a Date, a DateRange, or a factory returning either.
import { DateTimePicker, lastNDaysPreset } from "react-smart-datetime";
<DateTimePicker
range
mode="date"
presets={[
lastNDaysPreset(14),
{ label: "Q1", value: { start: new Date(2026, 0, 1), end: new Date(2026, 2, 31) } },
]}
/>;