---
title: "Date Picker"
description: "A date picker component with range and presets."
component: true
---

<ComponentExample name="date-picker-demo" />

## Usage

---

```tsx
import { DatePicker } from "@medusajs/ui"
```

```tsx
<DatePicker />
```

## API Reference

---

This component is based on the [Calendar](/components/calendar) component and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).

<ComponentProps component="date-picker" />


## Examples

---

### Single

<ComponentExample name="date-picker-single" />

### Single with time

<ComponentExample name="date-picker-single-time" />

### Single with presets

<ComponentExample name="date-picker-single-presets" />

### Single with presets and time

<ComponentExample name="date-picker-single-presets-time" />

### Range

<ComponentExample name="date-picker-range" />

### Range with time

<ComponentExample name="date-picker-range-time" />

### Range with presets

<ComponentExample name="date-picker-range-presets" />

### Range with presets and time

<ComponentExample name="date-picker-range-presets-time" />