Skip to main content

Date Picker

Choose a date from a visual calendar.

http://localhost:3000
<DatePicker aria-label="delivery date" />

Examples​

Label​

Attach a label to the datepicker using the label prop.

http://localhost:3000
<DatePicker label="Estimated Delivery Date" />

HelperText​

Add additional context as well as display error messages with the helperText prop.

http://localhost:3000
<DatePicker label="Estimated Delivery Date" helperText="Please select a delivery date." />

Small​

A small datepicker is used when vertical spacing is limited.

http://localhost:3000
<DatePicker aria-label="delivery date" size="small" />

Start Icon​

Include an icon before the input text.

http://localhost:3000
<DatePicker aria-label="delivery date" startIcon={<Icon icon="search" />} />

Controlled​

A datepickers's state can be controlled by a parent React component by setting the value prop and passing a handler to the onChange prop.

info

Date values are provided using objects in the @internationalized/date package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

http://localhost:3000
function Controlled() {
  const [value, setValue] = React.useState(new CalendarDate(2022, 7, 12));

  return <DatePicker aria-label="delivery date" value={value} onChange={setValue} />;
}

Unavailable Dates​

Set the isDateUnavailable handler prop to make certain dates unavailable for selection.

http://localhost:3000
function Unavailable() {
  const { locale } = useLocale();
  const isDateUnavailable = React.useCallback((date) => isWeekend(date, locale), [locale]);

  return <DatePicker aria-label="delivery date" isDateUnavailable={isDateUnavailable} />;
}

Disabled State​

Set the isDisabled prop to prevent a user from interacting with the datepicker.

http://localhost:3000
<DatePicker aria-label="delivery date" isDisabled />

Invalid State​

Set the validationState prop to invalid to render the datepicker in an invalid state.

http://localhost:3000
<DatePicker
  aria-label="delivery date"
  helperText="A selection is required"
  validationState="invalid"
/>

Props​

as?The root element to be rendered