Date Picker

A date picker combines a DateField and a Calendar popover to allow users to select a date from a calendar.

Date of Birth (Required)

Validation

Select supports the same validation functions as the other form elements. See the validation documentation for more details.

<DatePicker
    id="birthDate"
    name="birthDate"
    label="Date of Birth"
    description="Please select your date of birth"
    isRequired
    validate={(value) => {
    if (!value) {
        return 'Please select your date of birth';
    }
    const today = new Date();
    const selectedDate = new Date(value.toString());
        if (selectedDate > today) {
            return 'Please select a valid date of birth';
        }
    }}
/>
Date of Birth (Required)
Please select your date of birth

Other props

description

A description can be added to the date picker to provide additional context or instructions for the user.

Appointment date
Please select a date for your appointment
<DatePicker
    id="appointmentDate"
    name="appointmentDate"
    label="Appointment date"
    description="Please select a date for your appointment"
/>

isDisabled

A date picker can be disabled by setting the isDisabled prop to true.

Appointment date
<DatePicker
    id="appointmentDate"
    name="appointmentDate"
    label="Appointment date"
    isDisabled
/>

isInvalid

When rendered inside a form, the date picker will automatically enter an invalid state and display the field error message defined by the validation function. However, it is also possible to manually set the invalid state by setting the isInvalid prop to true and passing an errorMessage prop.

Appointment date
Please select a valid date
<DatePicker
    id="appointmentDate"
    name="appointmentDate"
    label="Appointment date"
    isInvalid
    errorMessage="Please select a valid date"
/>

isDateUnavailable

The isDateUnavailable prop allows you to disable specific dates in the calendar. It accepts a function that takes a date as an argument and returns a boolean indicating whether the date should be disabled.

Appointment date (Required)
Please select a date for your appointment
 <DatePicker
    id="appointmentDate"
    name="appointmentDate"
    label="Appointment date"
    description="Please select a date for your appointment"
    isRequired
    isDateUnavailable={isWeekend}
 />

hourCycle and granularity

Appointment date
Please select a date and time for your appointment
 <DatePicker
    id="appointmentDate"
    name="appointmentDate"
    label="Appointment date"
    hourCycle={24}
    granularity="minute"
    description="Please select a date and time for your appointment"
 />

value

Use the value or defaultValue prop to set the date value, using objects in the @internationalized/date package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

Appointment date
You cannot select another date at this time.
import { parseDate } from '@internationalized/date';
 
const date = parseDate('2020-02-03');
 <DatePicker
    id="appointmentDate"
    name="appointmentDate"
    label="Appointment date"
    value={date}
    isDisabled={true}
    description="You cannot select another date at this time."
/>
3rd Party Librariesversion
internationalized/date3.12.2

Props

PropTypeDescription
firstDayOfWeek'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'The first day of the week for the calendar.
isDateUnavailable(date: DateValue) => booleanA function that determines if a date is unavailable.
placeholderValue(date: DateValue) => booleanA placholder date.
hourCycle12 or 24The hour cycle to use for time selection.
granularityday, hour, minute, secondThe granularity of the date picker.
hideTimeZonebooleanWhether to hide the time zone information.
shouldForceLeadingZerosbooleanWhether to show leading zeros in month/day/hour fields. (Default: determined by user's locale)
isDisabledbooleanWhether the date picker is disabled.
isReadOnlybooleanWhether the date picker is read-only.