Date & Time

Date Picker

Popover-based date selection.

Import

tsx

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

bash

npx cronus-ui add date-picker

Examples

Pick a date

A popover-based picker. Pass `value` and `onChange` to control the selection.

No date selected yet.

tsx

const [date, setDate] = useState<Date | undefined>();

return (
  <div className="flex flex-col gap-3">
    <DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
    <span className="text-sm text-fg-tertiary">
      {date ? `Selected: ${date.toLocaleDateString("en-US")}` : "No date selected yet."}
    </span>
  </div>
);

.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 DatePickerDefault layout:inline style:date-picker {
  value:"2026-06-15"
  aria-label:"Due date"
  label "Pick a date"
  text "Pick a date"
}

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

API Reference

Generated from the component's exported types.

DatePickerProps

Extends Omit< ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange" | "disabled" | "name" >

Prop	Type	Default	Description
`value`	`Date`	—	Controlled selected date. Pair with `onValueChange`.
`defaultValue`	`Date`	—	Initial date for uncontrolled usage.
`onValueChange`	`(date: Date \| undefined) => void`	—	Called with the new date (`undefined` when deselected) on every selection change.
`onChange`	`(date: Date \| undefined) => void`	—	Legacy change callback, fired with the same payload as `onValueChange`.
`open`	`boolean`	—	Controlled open state of the calendar popover. Pair with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the popover opens or closes.
`placeholder`	`string`	`"Pick a date"`	Text shown on the trigger when no date is selected.
`disabled`	`boolean`	`false`	Disables the trigger entirely.
`invalid`	`boolean`	`false`	Marks the trigger invalid (error border/ring + `aria-invalid`).
`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`	`"PPP"`	`date-fns` format token for the trigger label.
`formatValue`	`(date: Date) => string`	—	Full override for the trigger label. Wins over `dateFormat`/`locale`.
`name`	`string`	—	Form field name — renders a hidden input with the local `yyyy-MM-dd` date.
`align`	`ComponentPropsWithoutRef<typeof PopoverContent>["align"]`	`"start"`	Alignment of the popover against the trigger.
`contentClassName`	`string`	—	Extra classes for the popover content.
`type`	`string`	—	Native type of the underlying element.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.