Range selection
Two-endpoint date ranges with live hover preview.
Set range to enable two-endpoint selection. Click once to set the start, move the mouse to
preview, click again to set the end — endpoints auto-order if you pick "backwards".
Select…
import { useState } from "react";
import { DateTimePicker, type DateRange } from "react-smart-datetime";
const [range, setRange] = useState<DateRange>({ start: null, end: null });
<DateTimePicker
range
mode="date"
monthsToShow={2}
rangeValue={range}
onRangeChange={setRange}
/>;Multiple months
Show 1–3 month grids side by side with monthsToShow — handy for ranges.
<DateTimePicker range mode="date" monthsToShow={2} />Uncontrolled range
<DateTimePicker
range
mode="date"
defaultRangeValue={{ start: new Date(2026, 0, 1), end: new Date(2026, 0, 7) }}
onRangeChange={(r) => console.log(r.start, r.end)}
/>