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

Prop	Type	Default	Description
`value`	`Date`	—	—
`onChange`	`(date: Date \| undefined) => void`	—	—
`placeholder`	`string`	—	—
`disabled`	`boolean`	—	—