Prop	Type	Default
`value`	`Date \| undefined`
`onChange`	`(date: Date \| undefined) => void`
`disabled`	`boolean \| undefined`	`false`
`minDate`	`Date \| undefined`
`maxDate`	`Date \| undefined`
`calendarPopoverAlign`	`"start" \| "center" \| "end" \| undefined`	`"start"`

Examples

Default

 function Example() {
  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>();

  return <DatePicker value={selectedDate} onChange={setSelectedDate} />;
}

This DatePicker uses a segmented input (YYYY-MM-DD) for keyboard entry and opens a calendar popover for selection via the calendar icon button. When a date is selected or typed completely, onChange is called with a valid Date object.

Disabled

 function Example() {
  return <DatePicker disabled />;
}

The component can be disabled to prevent both typing and calendar interactions.

With Validation Range

 function Example() {
  const [date, setDate] = React.useState<Date | undefined>();

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      minDate={new Date(2024, 0, 1)}
      maxDate={new Date(2024, 11, 31)}
    />
  );
}

Use minDate and maxDate to restrict valid input and calendar selection to a specific date range.

DatePickerRef

Exposes an imperative API to focus specific segments of the input:

 type DatePickerRef = {
  focusSegment: (segment: 'year' | 'month' | 'day') => void;
};