115 lines
3.0 KiB
Plaintext
115 lines
3.0 KiB
Plaintext
---
|
|
title: Date Picker
|
|
description: A date picker component with range and presets.
|
|
base: aria
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-demo" />
|
|
|
|
## Installation
|
|
|
|
The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
|
|
|
|
See installation instructions for the [Popover](/docs/components/aria/popover#installation) and the [Calendar](/docs/components/aria/calendar#installation) components.
|
|
|
|
## Usage
|
|
|
|
```tsx showLineNumbers title="components/example-date-picker.tsx"
|
|
"use client"
|
|
|
|
import * as React from "react"
|
|
import { getLocalTimeZone, type CalendarDate } from "@internationalized/date"
|
|
import { cn } from "cn"
|
|
import { Calendar as CalendarIcon } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Calendar } from "@/components/ui/calendar"
|
|
import { Popover, PopoverTrigger } from "@/components/ui/popover"
|
|
|
|
export function DatePickerDemo() {
|
|
const [date, setDate] = React.useState<CalendarDate | null>(null)
|
|
|
|
return (
|
|
<PopoverTrigger>
|
|
<Button
|
|
variant="outline"
|
|
data-empty={!date}
|
|
className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
|
|
>
|
|
<CalendarIcon />
|
|
{date ? (
|
|
date
|
|
.toDate(getLocalTimeZone())
|
|
.toLocaleDateString(undefined, { dateStyle: "long" })
|
|
) : (
|
|
<span>Pick a date</span>
|
|
)}
|
|
</Button>
|
|
<Popover className="w-auto p-0">
|
|
<Calendar value={date} onChange={setDate} />
|
|
</Popover>
|
|
</PopoverTrigger>
|
|
)
|
|
}
|
|
```
|
|
|
|
See the [React Aria](https://react-aria.adobe.com/Calendar) documentation for more information.
|
|
|
|
## Composition
|
|
|
|
A date picker is built from `Popover` and `Calendar` (there is no `DatePicker` root component):
|
|
|
|
```text
|
|
PopoverTrigger
|
|
├── Button
|
|
└── Popover
|
|
└── Calendar
|
|
```
|
|
|
|
## Basic
|
|
|
|
A basic date picker component.
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-basic" />
|
|
|
|
## Range Picker
|
|
|
|
A date picker component for selecting a range of dates.
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-range" />
|
|
|
|
## 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.
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-dob" />
|
|
|
|
## Input
|
|
|
|
A date picker component with an input field for selecting a date.
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-input" />
|
|
|
|
## Time Picker
|
|
|
|
A date picker component with a time input field for selecting a time.
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-time" />
|
|
|
|
## Natural Language Picker
|
|
|
|
This component uses the `chrono-node` library to parse natural language dates.
|
|
|
|
<ComponentPreview styleName="aria-nova" name="date-picker-natural-language" />
|
|
|
|
## RTL
|
|
|
|
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="date-picker-rtl"
|
|
direction="rtl"
|
|
/>
|