Inputs

DatePicker

A controlled date field with an accessible calendar popover.

DatePickerView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Date

tsx

import { Cell } from "retend";

import { DatePicker, Field } from "innate-ui";
import classes from "../docs.module.css";
import { Icon } from "@/docs/icons/Icon";

export function DatePickerDemo() {
  const date = Cell.source<Date | null>(null);
  return (
    <Field id="date-picker-demo" class={classes.datePickerDemo}>
      <Field.Label>Date</Field.Label>
      <DatePicker value={date} onChange={(value) => date.set(value)}>
        <DatePicker.PreviousIcon>
          <Icon name="chevronLeft" data-slot-icon="date-previous" />
        </DatePicker.PreviousIcon>
        <DatePicker.NextIcon>
          <Icon name="chevronRight" data-slot-icon="date-next" />
        </DatePicker.NextIcon>
      </DatePicker>
    </Field>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

DatePickerProps

Prop	Type	Default
`value`required Selected date, or `null` when no date is selected.	`JSX.ValueOrCell<Date \| null>`	`—`
`children` Custom content rendered inside the trigger.	`JSX.Children`	`—`
`open` Whether the calendar popover is open.	`JSX.ValueOrCell<boolean>`	`—`
`visibleMonth` Month currently displayed by the calendar.	`JSX.ValueOrCell<Date>`	`—`
`locale` Locale used to format dates and month/day labels.	`JSX.ValueOrCell<string>`	`—`
`weekStartsOn` First day of the week: Sunday (`0`) or Monday (`1`).	`JSX.ValueOrCell<0 \| 1>`	`—`
`min` Earliest selectable date.	`JSX.ValueOrCell<Date \| null>`	`—`
`max` Latest selectable date.	`JSX.ValueOrCell<Date \| null>`	`—`
`placeholder` Trigger placeholder when no date is selected.	`JSX.ValueOrCell<string>`	`—`
`disabled` Whether the date picker is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`invalid` Whether the date picker is in an invalid state.	`JSX.ValueOrCell<boolean>`	`false`
`ariaDescribedBy` Ids of elements that describe the trigger.	`JSX.ValueOrCell<string \| undefined>`	`—`
`onChange` Called when the selected date changes.	`(date: Date \| null) => void`	`—`
`onOpenChange` Called when the calendar popover requests an open-state change.	`(open: boolean, reason?: PopoverCloseReason) => void`	`—`
`onVisibleMonthChange` Called when the displayed month changes.	`(month: Date) => void`	`—`

Inspect the typed source →