---
title: Date Picker
description: A date picker component with range and presets.
source: apps/www/registry/default/example/DatePickerDemo.vue
primitive: https://www.reka-ui.com/docs/components/calendar.html
---

<ComponentPreview name="DatePickerDemo" />

## Installation

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

See installations instructions for the [Popover](/docs/components/popover), [Calendar](/docs/components/calendar), and [Range Calendar](/docs/components/range-calendar) components.

## Examples

### Date Picker

<ComponentPreview name="DatePickerDemo" />

### Date Range Picker

<ComponentPreview name="DatePickerWithRange" />

### Date Range Picker with Independent Months

<ComponentPreview name="DatePickerWithIndependentMonths" />

### With Presets

<ComponentPreview name="DatePickerWithPresets" />

### Form

<ComponentPreview name="DatePickerForm" />
