Date picker components

FREE

Free and open-source React date picker components built for modern applications and websites. These date pickers are built using React Aria and styled with Tailwind CSS.

Date picker example

Installation

You can add this date picker component using our CLI or manually:

npx untitledui@latest add date-picker

Date picker examples

Below are examples and variations of this date picker component:

Date picker

Date time picker

Date range picker with presets

Calendar

Calendar, October 2026

mmddyyyy
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Calendar card

Range calendar

Range calendar, October to November 2026

October 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

November 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Range calendar card

API reference

Calendar

Import Calendar from @/components/application/date-picker/calendar.

Calendar props
PropTypeDefaultDescription
highlightedDatesDateValue[]—The dates to highlight.
childrenReactNode—The content to render between the header and the calendar grid. If not provided, a default layout will be rendered with a date input and a today button.
Props from react-stately (29)
Calendar inherited props
PropTypeDefaultDescription
autoFocusbooleanfalseWhether to automatically focus the calendar when it mounts.
createCalendar((identifier: CalendarIdentifier) => Calendar)—A function to create a new Calendar object for a given calendar identifier. If not provided, the createCalendar function from @internationalized/date will be used.
defaultFocusedValueDateValue | null—The date that is focused when the calendar first mounts (uncontrolled).
defaultValueDateValue | null—The default value (uncontrolled).
firstDayOfWeek
"sun""mon""tue""wed""thu""fri""sat"
—The day that starts the week.
focusedValueDateValue | null—Controls the currently focused date within the calendar.
idstring—The element's unique identifier.
isDateUnavailable((date: DateValue) => boolean)—Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabledbooleanfalseWhether the calendar is disabled.
isInvalidboolean—Whether the current selection is invalid according to application logic.
isReadOnlybooleanfalseWhether the calendar value is immutable.
maxValueDateValue | null—The maximum allowed date that a user may select.
minValueDateValue | null—The minimum allowed date that a user may select.
onChange((value: DateValue) => void)—Handler that is called when the value changes.
onFocusChange((date: CalendarDate) => void)—Handler that is called when the focused date changes.
pageBehavior
"single""visible"
visibleControls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
selectionAlignment
"start""center""end"
"center"Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.
selectionMode"single""single"Whether single or multiple selection is enabled.
valueDateValue | null—The current value (controlled).
visibleDurationDateDuration{ months: 1 }The amount of days that will be displayed at once. This affects how pagination works.
weeksInMonthnumber—The number of weeks in a month. This overrides the default set by the locale.
styleStyleOrFunction<CalendarRenderProps<"single">>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<CalendarRenderProps<"single">>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", CalendarRenderProps<"single">>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

CalendarCell

Import CalendarCell from @/components/application/date-picker/cell. Renders React Aria’s CalendarCell — all of its props are supported.

CalendarCell props
PropTypeDefaultDescription
isRangeCalendarboolean—Whether the calendar is a range calendar.
isHighlightedboolean—Whether the cell is highlighted.
showOutOfRangeDatesbooleanfalseWhether to show out of range dates.
Props from React Aria Components (8)
CalendarCell inherited props
PropTypeDefaultDescription
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
date* (required)CalendarDate—The date to render in the cell.
styleStyleOrFunction<CalendarCellRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<CalendarCellRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
classNameClassNameOrFunction<CalendarCellRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", CalendarCellRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

CalendarContextProvider

Import CalendarContextProvider from @/components/application/date-picker/calendar.

CalendarContextProvider props
PropTypeDefaultDescription
childrenReactNode——

DatePicker

Import DatePicker from @/components/application/date-picker/date-picker. Renders React Aria’s DatePicker — all of its props are supported.

DatePicker props
PropTypeDefaultDescription
onApply(() => void)—The function to call when the apply button is clicked.
onCancel(() => void)—The function to call when the cancel button is clicked.
size
"xs""sm""md""lg""xl"
"sm"Controls the size of the trigger button that opens the calendar.
Props from React Aria (42)
DatePicker inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
defaultOpenboolean—Whether the overlay is open by default (uncontrolled).
defaultValueDateValue | null—The default value (uncontrolled).
firstDayOfWeek
"sun""mon""tue""wed""thu""fri""sat"
—The day that starts the week.
granularity
"day""hour""minute""second"
—Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideTimeZonebooleanfalseWhether to hide the time zone abbreviation.
hourCycle
1224
—Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
idstring—The element's unique identifier.
isDateUnavailable((date: DateValue) => boolean)—Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input value is invalid.
isOpenboolean—Whether the overlay is open by default (controlled).
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
maxValueDateValue | null—The maximum allowed date that a user may select.
minValueDateValue | null—The minimum allowed date that a user may select.
onChange((value: DateValue | null) => void)—Handler that is called when the value changes.
onOpenChange((isOpen: boolean) => void)—Handler that is called when the overlay's open state changes.
pageBehavior
"single""visible"
visibleControls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
placeholderValueDateValue | null—A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
shouldCloseOnSelectboolean | (() => boolean)falseDetermines whether the date picker popover should close automatically when a date is selected.
shouldForceLeadingZerosboolean—Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
validate((value: DateValue) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valueDateValue | null—The current value (controlled).
styleStyleOrFunction<DatePickerRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<DatePickerRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<DatePickerRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", DatePickerRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring"Date picker"Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

DateRangePicker

Import DateRangePicker from @/components/application/date-picker/date-range-picker. Renders React Aria’s DateRangePicker — all of its props are supported.

DateRangePicker props
PropTypeDefaultDescription
size
"xs""sm""md""lg""xl"
"sm"Controls the size of the trigger button that opens the calendar.
onApply(() => void)—The function to call when the apply button is clicked.
onCancel(() => void)—The function to call when the cancel button is clicked.
Props from React Aria (43)
DateRangePicker inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
allowsNonContiguousRangesboolean—When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
defaultOpenboolean—Whether the overlay is open by default (uncontrolled).
defaultValueRangeValue<DateValue> | null—The default value (uncontrolled).
endNamestring—The name of the end date input element, used when submitting an HTML form.
firstDayOfWeek
"sun""mon""tue""wed""thu""fri""sat"
—The day that starts the week.
granularity
"day""hour""minute""second"
—Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideTimeZonebooleanfalseWhether to hide the time zone abbreviation.
hourCycle
1224
—Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
idstring—The element's unique identifier.
isDateUnavailable((date: DateValue, anchorDate: CalendarDate | null) => boolean)—Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input value is invalid.
isOpenboolean—Whether the overlay is open by default (controlled).
isReadOnlyboolean—Whether the input can be selected but not changed by the user.
isRequiredboolean—Whether user input is required on the input before form submission.
maxValueDateValue | null—The maximum allowed date that a user may select.
minValueDateValue | null—The minimum allowed date that a user may select.
onChange((value: RangeValue<DateValue> | null) => void)—Handler that is called when the value changes.
onOpenChange((isOpen: boolean) => void)—Handler that is called when the overlay's open state changes.
pageBehavior
"single""visible"
visibleControls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
placeholderValueDateValue | null—A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
shouldCloseOnSelectboolean | (() => boolean)falseDetermines whether the date picker popover should close automatically when a date is selected.
shouldForceLeadingZerosboolean—Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
startNamestring—The name of the start date input element, used when submitting an HTML form.
validate((value: RangeValue<DateValue>) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valueRangeValue<DateValue> | null—The current value (controlled).
styleStyleOrFunction<DateRangePickerRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<DateRangePickerRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<DateRangePickerRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", DateRangePickerRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring"Date range picker"Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

RangeCalendar

Import RangeCalendar from @/components/application/date-picker/range-calendar.

RangeCalendar props
PropTypeDefaultDescription
highlightedDatesDateValue[]—The dates to highlight.
presetsRecord<string, { label: string; value: { start: DateValue; end: DateValue; }; }>—The date presets to display.
showOutOfRangeDatesbooleanfalseWhether to show out of range dates.
showPresetsOnDesktopbooleanfalseWhether to show presets on desktop.
Props from react-stately (31)
RangeCalendar inherited props
PropTypeDefaultDescription
allowsNonContiguousRangesboolean—When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
autoFocusbooleanfalseWhether to automatically focus the calendar when it mounts.
commitBehavior
"clear""reset""select"
"select"Controls the behavior when a pointer is released outside the calendar or a blur occurs mid selection:
  • clear: clear the currently selected range of dates.
  • reset: reset the selection to the previously selected range of dates.
  • select: select the currently hovered range of dates.
createCalendar((identifier: CalendarIdentifier) => Calendar)—A function to create a new Calendar object for a given calendar identifier. If not provided, the createCalendar function from @internationalized/date will be used.
defaultFocusedValueDateValue | null—The date that is focused when the calendar first mounts (uncontrolled).
defaultValueRangeValue<DateValue> | null—The default value (uncontrolled).
firstDayOfWeek
"sun""mon""tue""wed""thu""fri""sat"
—The day that starts the week.
focusedValueDateValue | null—Controls the currently focused date within the calendar.
idstring—The element's unique identifier.
isDateUnavailable((date: DateValue, anchorDate: CalendarDate | null) => boolean)—Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. The second argument provides the current selection anchor date, if any. This can be used to adjust the available dates based on the user's first selected date.
isDisabledbooleanfalseWhether the calendar is disabled.
isInvalidboolean—Whether the current selection is invalid according to application logic.
isReadOnlybooleanfalseWhether the calendar value is immutable.
maxValueDateValue | null—The maximum allowed date that a user may select.
minValueDateValue | null—The minimum allowed date that a user may select.
onChange((value: RangeValue<DateValue>) => void)—Handler that is called when the value changes.
onFocusChange((date: CalendarDate) => void)—Handler that is called when the focused date changes.
pageBehavior
"single""visible"
visibleControls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
selectionAlignment
"start""center""end"
"center"Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.
valueRangeValue<DateValue> | null—The current value (controlled).
visibleDurationDateDuration{ months: 1 }The amount of days that will be displayed at once. This affects how pagination works.
weeksInMonthnumber—The number of weeks in a month. This overrides the default set by the locale.
styleStyleOrFunction<RangeCalendarRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<RangeCalendarRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<RangeCalendarRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", RangeCalendarRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

RangeCalendarContextProvider

Import RangeCalendarContextProvider from @/components/application/date-picker/range-calendar.

RangeCalendarContextProvider props
PropTypeDefaultDescription
childrenReactNode——

RangePresetButton

Import RangePresetButton from @/components/application/date-picker/range-calendar. Renders a <button> element.

RangePresetButton props
PropTypeDefaultDescription
value* (required){ start: DateValue; end: DateValue; }—The date range applied when the preset is pressed. The button is highlighted while this range is the selected one.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

It works with DateValue objects from @internationalized/date, not JavaScript Date — create one with helpers like today(getLocalTimeZone()) or parseDate("2025-01-31"). To hand the value to an API, convert it back with value.toDate(getLocalTimeZone()).

Pass value with onChange for a controlled picker, or defaultValue alone for an uncontrolled one. The popover stays open after a day is picked, and onChange fires on every click, so the value is already updated before the user presses Apply. Cancel only closes the popover and calls onCancel; it does not restore the previous value, so handle that yourself if you need it.

Use DateRangePicker from the same folder. Its value is an object of DateValues shaped { start, end }. From the lg breakpoint up it shows nine presets in a sidebar (Today, Yesterday, This week, Last week, This month, Last month, This year, Last year and All time), and below md it shows Last week, Last month and Last year as inline buttons instead. The week presets use the current locale's first day of the week.

All React Aria date picker props are forwarded, so use minValue and maxValue to bound the range and isDateUnavailable to disable individual days such as weekends or booked dates. isDisabled and isReadOnly work the same way on the whole field.

RangeCalendar reads the months value of visibleDuration. If you leave it out, it shows two months from the md breakpoint up and one month below, with start and end date inputs above the grid on small screens. The layout renders at most two month grids, so use visibleDuration={{ months: 1 }} or visibleDuration={{ months: 2 }}.

Both DatePicker and DateRangePicker take a size prop that is passed to the underlying Button, and it defaults to "sm".

Pass an array of DateValues to the highlightedDates prop on Calendar, and matching days get a small dot under the number. Today always gets the dot in every calendar. RangeCalendar accepts the prop in its types but doesn't apply it to its cells, and DatePicker and DateRangePicker don't expose it, so use Calendar directly when you need custom highlights.

Content dividersEmpty states