snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/content/docs/components/aria/date-picker.mdx

@@ -0,0 +1,114 @@
+---
+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"
+/>