DatePicker
A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
granularity
"day" for dates, and "minute" for times.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.
Selected date: Monday, February 3, 2020
import {parseDate, getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from 'react-aria';
import {DatePicker} from './DatePicker';
import {useState} from 'react';
function Example() {
let [date, setDate] = useState(parseDate('2020-02-03'));
let formatter = useDateFormatter({ dateStyle: 'full' });
return (
<>
<DatePicker
value={date}
onChange={setDate} />
<p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
</>
);
}
Format options
The date format is automatically determined based on the user's locale. DatePicker supports several props to control how values are displayed.
granularity
"day" for dates, and "minute" for times.International calendars
By default, DatePicker displays the value using the calendar system for the user's locale. Use <I18nProvider> to override the calendar system by setting the Unicode calendar locale extension. The onChange event always receives a date in the same calendar as the value or defaultValue (Gregorian if no value is provided), regardless of the displayed locale.
Forms
Use the name prop to submit the selected date to the server as an ISO 8601 string. Set the isRequired, minValue, or maxValue props to validate the value, or implement custom client or server-side validation. The isDateUnavailable callback prevents certain dates from being selected. See the Forms guide to learn more.
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {useLocale} from 'react-aria';
import {DatePicker} from './DatePicker';
import {Button} from './Button';
import {Form} from 'react-aria-components';
function Example() {
let {locale} = useLocale();
let now = today(getLocalTimeZone());
let disabledRanges = [
[now, now.add({ days: 5 })],
[now.add({ days: 14 }), now.add({ days: 16 })],
[now.add({ days: 23 }), now.add({ days: 24 })]
];
return (
<Form>
<DatePicker
label="Appointment date"
name="date"
isRequired
minValue={today(getLocalTimeZone())}
isDateUnavailable={date => (
isWeekend(date, locale) ||
disabledRanges.some((interval) =>
date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
)
)}
/>
<Button type="submit">Submit</Button>
</Form>
);
}