Date Picker

Usage

import { DatePicker } from "@chakra-ui/react"

<DatePicker.Root>
  <DatePicker.Label />
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.IndicatorGroup>
      <DatePicker.Trigger>
        <LuCalendar />
      </DatePicker.Trigger>
    </DatePicker.IndicatorGroup>
  </DatePicker.Control>
  <Portal>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.View view="day">
          <DatePicker.Header />
          <DatePicker.DayTable />
        </DatePicker.View>
        <DatePicker.View view="month">
          <DatePicker.Header />
          <DatePicker.MonthTable />
        </DatePicker.View>
        <DatePicker.View view="year">
          <DatePicker.Header />
          <DatePicker.YearTable />
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </Portal>
</DatePicker.Root>

Date Value

Date values are provided using objects from @internationalized/date, which handles timezone-safe, locale-aware date handling.

This will be replaced by the Temporal API when it's widely supported in browsers.

Examples

Sizes

Use the size prop to change the size of the date picker.

Variants

Use the variant prop to change the visual style of the date picker.

Disabled

Use the disabled prop to prevent user interaction with the date picker.

Read Only

Use the readOnly prop to prevent modification while keeping the value visible.

Default View

Use the defaultView prop to set the initial calendar view to "day", "month", or "year".

Default Value

Use the defaultValue prop to set the initially selected date.

Controlled

Use the value and onValueChange props to control the selected date.

Store

An alternative way to control the date picker is to use the RootProvider component and the useDatePicker store hook.

Range Selection

Set the selectionMode prop to "range" to allow selecting a start and end date.

Multiple Selection

Set the selectionMode prop to "multiple" to allow selecting multiple dates.

Month Picker

Set the defaultView and minView props to "month" to restrict the picker to month selection only.

Month Range

Set the selectionMode prop to "range" and minView to "month" to select a month range.

Year Picker

Set the defaultView and minView props to "year" to restrict the picker to year selection only.

Year Range

Set the selectionMode prop to "range" and minView to "year" to select a year range.

Min/Max

Use the min and max props to restrict date selection to a specific range.

Unavailable Dates

Use the isDateUnavailable prop to disable specific dates (e.g., weekends, holidays).

Formatting & Parsing

Use the format and parse props to control how dates are displayed and interpreted.

Localization

Use the locale prop to display the calendar in different languages and regional formats.

Button Trigger

Replace the default trigger with a styled custom button.

Outside Icon

Place the trigger icon outside the input field.

Input Group

Integrate with InputGroup for custom input layouts with start/end elements.

Clear Icon

Add a clear trigger to reset the selection.

Placement

Use the positioning prop to control the placement of the calendar popover.

Header Layout

Here's an example of customizing the header layout with RangeText and navigation buttons.

Month and Year Select

Render the DatePicker.MonthSelect and DatePicker.YearSelect components for quick month/year navigation.

Multiple Months

Use the numOfMonths prop to display multiple months side by side.

Presets

Render the DatePicker.PresetTrigger component to provide quick date selection options.

Presets Sidebar

Here's an example of a task-management style picker with presets sidebar and calendar side by side.

Today Button

Here's an example of adding a footer button to quickly jump to today's date.

With Time

Here's an example of combining date selection with a time input for datetime picking.

Form

Here's an example of integrating with native form validation.

React Hook Form

Here's an example of integrating with react-hook-form using the Controller pattern.

Fixed Weeks

Use the fixedWeeks prop to always display 6 weeks in the calendar, ensuring a consistent height regardless of the month.

Open on Click

Use the openOnClick prop to open the calendar when clicking the input field, removing the need for a separate trigger button.

Field

The DatePicker does not natively integrate with the Field component yet. Use Field.Context to wire up the field state manually. Native support will be added in a future version.