shadcn.io is not affiliated with official shadcn/ui

Shadcn Date Picker for React Radix UI

Input with a built-in calendar.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/date-picker.json

Anatomy

DatePickerRoot
├── DatePickerClearTrigger
├── DatePickerContent
│   └── DatePickerPositioner
├── DatePickerLabel
├── DatePickerMonthSelect
├── DatePickerNextTrigger
├── DatePickerPresetTrigger
├── DatePickerPrevTrigger
├── DatePickerRangeText
├── DatePickerTable
│   ├── DatePickerTableBody
│   ├── DatePickerTableCell
│   │   └── DatePickerTableCellTrigger
│   ├── DatePickerTableHead
│   ├── DatePickerTableHeader
│   └── DatePickerTableRow
├── DatePickerView
│   ├── DatePickerViewControl
│   └── DatePickerViewTrigger
└── DatePickerYearSelect

Usage

import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarViewDate,
  CalendarWeekDays,
} from "@/components/ui/calendar";
import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
  DatePickerValue,
} from "@/components/ui/date-picker";

<DatePicker>
  <DatePickerTrigger asChild>
    <Button
      className="w-[212px] justify-between font-normal"
      variant="outline"
    >
      <DatePickerValue placeholder="Pick a date" />
      <ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
    </Button>
  </DatePickerTrigger>
  <DatePickerContent>
    <CalendarViewControl>
      <CalendarPrevTrigger />
      <CalendarViewDate />
      <CalendarNextTrigger />
    </CalendarViewControl>
    <CalendarTable>
      <CalendarWeekDays />
      <CalendarTableDays />
    </CalendarTable>
  </DatePickerContent>
</DatePicker>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Basic

A basic date picker component.

PreviewCode

Range

A date picker component for selecting a range of dates.

PreviewCode

Dob

A date picker for selecting a date of birth, with month and year dropdowns.

PreviewCode

Input

A date picker component with an input field for selecting a date.

PreviewCode

Time

A date picker component with a time input field for selecting a time.

PreviewCode

Natural Language

Parse natural language dates in the input and keep a calendar for picking.

PreviewCode

Rtl

Right-to-left date picker. See the RTL configuration guide for document direction.

PreviewCode

API Reference

DatePicker

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

AttributeType

data-slot"date-picker"

data-scope"date-picker"

data-part"root"

data-disabled?string

data-empty?string

data-readonly?string

data-state"open" | "closed"

DatePickerContent

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

className?string

AttributeType

data-slot"date-picker-content"

data-scope"date-picker"

data-part"content"

aria-labelstring

aria-roledescription"datepicker"

data-inline?string

data-placementstring

data-sidestring

data-state"open" | "closed"

role"application"

CSS variableType

--transform-originstring

DatePickerControl

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

AttributeType

data-slot"date-picker-control"

data-scope"date-picker"

data-part"control"

data-disabled?string

data-placeholder-shown?string

DatePickerInput

input

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

fixOnBlur?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

index?number

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

className?string

AttributeType

data-slot"date-picker-input"

data-scope"date-picker"

data-part"input"

DatePickerPositioner

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

AttributeType

data-slot"date-picker-positioner"

data-scope"date-picker"

data-part"positioner"

CSS variableType

--transform-originstring

DatePickerPresetTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

valueDateValue[] | DateRangePreset

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

AttributeType

data-slot"date-picker-preset-trigger"

data-scope"date-picker"

data-part"preset-trigger"

aria-labelstring

type"button"

DatePickerTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

className?string

AttributeType

data-slot"date-picker-trigger"

data-scope"date-picker"

data-part"trigger"

aria-controlsstring

aria-expandedstring

aria-haspopup"grid"

aria-labelstring

data-placeholder-shown?string

data-placementstring

data-sidestring

data-state"open" | "closed"

type"button"

DatePickerTimer

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

size?"lg" | "md" | "sm"

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

className?string

AttributeType

data-scope"date-picker"

data-part"root"

data-disabled?string

data-empty?string

data-readonly?string

data-state"open" | "closed"

DatePickerValue

span

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

idstring

children?(props: DatePickerValueTextRenderProps) → React.ReactNode

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

dir?"ltr" | "rtl"

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

separator?string

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object

asChild?boolean

className?string

AttributeType

data-slot"date-picker-value"

data-scope"date-picker"

data-part"value-text"

useDatePicker

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

value?DateValue[]

defaultValue?DateValue[]

onValueChange?(details: ValueChangeDetails) → void

view?"day" | "month" | "year"

defaultView?"day" | "month" | "year"

onViewChange?(details: ViewChangeDetails) → void

closeOnSelect?boolean

createCalendar?(identifier: CalendarIdentifier) → Calendar

defaultFocusedValue?DateValue

disabled?boolean

fixedWeeks?boolean

focusedValue?DateValue

format?(date: DateValue, details: LocaleDetails) → string

id?string

ids?object

inline?boolean

invalid?boolean

isDateUnavailable?(date: DateValue, locale: string) → boolean

locale?string

max?DateValue

maxSelectedDates?number

maxView?"day" | "month" | "year"

min?DateValue

minView?"day" | "month" | "year"

name?string

numOfMonths?number

onFocusChange?(details: FocusChangeDetails) → void

onVisibleRangeChange?(details: VisibleRangeChangeDetails) → void

openOnClick?boolean

outsideDaySelectable?boolean

parse?(value: string, details: LocaleDetails) → DateValue

placeholder?string

positioning?PositioningOptions

readOnly?boolean

required?boolean

selectionMode?"single" | "multiple" | "range"

showWeekNumbers?boolean

startOfWeek?number

timeZone?string

translations?object