Date & Time

Date Range Picker

Start/end date selection with presets.

Import

tsx

import { DateRangePicker } from "@cronus-ui/ui";

bash

npx cronus-ui add date-range-picker

Examples

Date range

A controlled start/end selection in a popover. Pass `value` and `onValueChange`; both ends are optional so an in-progress selection is valid.

tsx

const [range, setRange] = useState<DateRange | undefined>(() => ({
  from: new Date(2026, 5, 21),
  to: new Date(2026, 5, 27),
}));

return (
  <DateRangePicker
    value={range}
    onValueChange={setRange}
    numberOfMonths={1}
    aria-label="Pick a date range"
  />
);

With presets

Add a `presets` column of named shortcuts beside the calendar — ideal for reporting ranges like the last 7 or 30 days.

tsx

const [range, setRange] = useState<DateRange | undefined>();

return (
  <DateRangePicker
    value={range}
    onValueChange={setRange}
    numberOfMonths={1}
    aria-label="Pick a reporting range"
    presets={[
      { label: "Last 7 days", range: { from: addDays(today, -6), to: today } },
      { label: "Last 30 days", range: { from: addDays(today, -29), to: today } },
      { label: "This week", range: { from: today, to: addDays(today, 6) } },
    ]}
  />
);

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component DateRangePickerDefault layout:inline style:date-range-picker {
  aria-label:"Report period"
  label "Pick a date range"
  text "Pick a date range"
}

page "/audit/date-range-picker/default" type:custom {
  use DateRangePickerDefault
}

API Reference

Generated from the component's exported types.

DateRangePickerProps

Prop	Type	Default	Description
`value`	`DateRange`	—	Controlled value. Pair with `onValueChange`.
`defaultValue`	`DateRange`	—	Initial value for uncontrolled usage.
`onValueChange`	`(range: DateRange \| undefined) => void`	—	Called with the new range whenever the selection changes.
`presets`	`DateRangePreset[]`	—	Optional shortcuts shown in a column beside the calendar.
`placeholder`	`string`	`"Pick a date range"`	Text shown on the trigger when no range is selected.
`disabled`	`boolean`	`false`	Disables the trigger entirely.
`min`	`Date`	—	Earliest selectable day (inclusive).
`max`	`Date`	—	Latest selectable day (inclusive).
`disabledDates`	`Matcher \| Matcher[]`	—	Extra non-selectable days, merged with `min`/`max`.
`locale`	`Locale`	—	`date-fns` locale used for both the trigger label and the calendar.
`dateFormat`	`string`	`"LLL dd, y"`	`date-fns` format token for each end of the range.
`formatValue`	`(range: DateRange) => string`	—	Full override for the trigger label. Wins over `dateFormat`/`locale`.
`align`	`ComponentPropsWithoutRef<typeof PopoverContent>["align"]`	`"start"`	Alignment of the popover against the trigger.
`numberOfMonths`	`number`	`2`	Number of months shown on wider viewports.
`className`	`string`	—	Extra classes for the trigger button.
`contentClassName`	`string`	—	Extra classes for the popover content.
`aria-label`	`string`	—	Accessible name for the trigger when there is no visible label.
`aria-labelledby`	`string`	—	ID of an element labelling the trigger.