Date Picker

"use client"

import * as React from "react"

Installation#

The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.

See installation instructions for the Popover and the Calendar components.

Composition#

A date picker is built from Popover and Calendar (there is no DatePicker root component):

コピーPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Examples#

Basic#

A basic date picker component.

"use client"

import * as React from "react"

Range Picker#

A date picker component for selecting a range of dates.

"use client"

import * as React from "react"

Date of Birth#

A date picker component for selecting a date of birth. This component includes a dropdown caption layout for date and month selection.

"use client"

import * as React from "react"

Input#

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

"use client"

import * as React from "react"

Time Picker#

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

"use client"

import * as React from "react"

Natural Language Picker#

This component uses the chrono-node library to parse natural language dates.

"use client"

import * as React from "react"

RTL#

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"