Forms

DatePicker and DateRangePicker

Fields that open a Calendar: one date, or a range with presets.

import { DatePicker, DateRangePicker } from "@flinbu/seed";

Date and range

Publish on

Release window

Presets apply at once.

import { DatePicker, DateRangePicker, Field } from "@flinbu/seed";

<div className="grid w-full max-w-lg gap-base sm:grid-cols-2">
  <Field label="Publish on"><DatePicker defaultValue={new Date()} /></Field>
  <Field label="Release window" hint="Presets apply at once."><DateRangePicker /></Field>
</div>

Use it for

Dates people pick rather than type: deadlines, report periods.

Props

Prop	Type	Default	Description
`value / defaultValue`	`DateDateRangenull`	–	Selection.
`onValueChange`	`(value) => void`	–	DatePicker: on pick. DateRangePicker: on Apply or a preset.
`placeholder`	`string`	–	Shown when empty.
`DateRangePicker: presets`	`{ label, range() }[]false`	–	Default: Today, Last 7 days, Last 30 days, This month, Last month, This year.
`DateRangePicker: months`	`12`	`2`	Months in the popover.
`formatDate / formatRange`	`function`	–	Your own text.
`size`	`'sm''md''lg'`	`'md'`	Same heights as Input.

Accessibility

The field is a button named by its Field label; the calendar opens in a labelled popover and Escape returns focus.
DateRangePicker announces the picked range and its length.