 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;
};

Variants

Dashboard

2 variants found

DatePicker in Date Range Filterdashboard

Context

Prop	Type	Default	Required
`calendarPopoverAlign`	`"center" \| "end" \| "start"`	`start`	no
`disabled`	`boolean`	`false`	no
`maxDate`	`Date`	—	no
`minDate`	`Date`	—	no
`value`	`Date`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Usage

Used 2 times across 1 package

Dashboard

Where it's used

1 file

packages/dashboard/src/components/filters/date-range-filter.tsx2

DatePicker

On this page

Props

`calendarPopoverAlign`

`disabled`

`maxDate`

`minDate`

`value`

Usage

Default

Disabled

With Validation Range

DatePickerRef

Variants

Dashboard

Context

Full API Reference

Usage Statistics

Usage

Where it's used