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

<ComponentPreview name="DatePickerDemo" />

<Callout class="text-base mt-12">

If you're looking for **previous** Date Picker implementation, checkout to <span class="font-bold underline">[VCalendar Datepicker](/docs/components/v-date-picker)</span> component

</Callout>

## 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" />
