Date & Time

Date Picker

Popover-based date selection.

Import

tsx

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

bash

npx cooud-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()}` : "No date selected yet."}
    </span>
  </div>
);

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.