Forms

Date range picker.

A start and an end, kept in the same context.

LIVE PREVIEWTry it. It works.

Reporting period

Select a start and end date, then choose Done.

No complete reporting period.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/date-range.json

Registry setup · Open the playground

Usage

<DateRangePicker label="Reporting period" name="period"
  value={range} onValueChange={setRange}
  minDate={new Date(2026,9,5)} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Accepts DateRange or null; onValueChange fires as each endpoint changes. Done closes once both dates exist. A same-day range is supported; disabled dates cannot be crossed. name emits period.from and period.to hidden date-only inputs. Bounds, locale, disabled, hint and error match DatePicker. This component does not buffer changes until Done.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.