# Date Picker

A date picker component built by composing the Popover and Calendar.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="date-picker-demo">
  <DatePickerDemo />
</ComponentPreview>

The Date Picker is built by composing [Popover](/docs/components/popover) and [Calendar](/docs/components/calendar). There is no separate component
to install — add the building blocks and compose them.

## Installation [#installation]

```bash
npx shadcn@latest add https://shadcn-cssinjs.com/r/popover.json
npx shadcn@latest add https://shadcn-cssinjs.com/r/calendar.json
```

## Examples [#examples]



### Basic [#basic]

<ComponentPreview name="date-picker-basic">
  <DatePickerSimple />
</ComponentPreview>

### Range Picker [#range-picker]

<ComponentPreview name="date-picker-range">
  <DatePickerRange />
</ComponentPreview>

### Date of Birth [#date-of-birth]

<ComponentPreview name="date-picker-dob">
  <DatePickerDob />
</ComponentPreview>



## RTL [#rtl]

To enable right-to-left support, see the [RTL guide](/docs/rtl).

<ComponentPreview name="date-picker-rtl" direction="rtl">
  <DatePickerRtl />
</ComponentPreview>