# Date Time Range Picker
URL: /docs/web/components/date-time-range-picker

Date Time Range Picker component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { useForm } from 'react-hook-form';

import { DateTimeRangePicker } from '@docyrus/ui/components/date-time-range-picker';
import { Button } from '@docyrus/ui/primitives/ui/button';
import {
  Form,
  FormField
} from '@docyrus/ui/primitives/ui/form';

type ScheduleValues = { startDate: Date | null; endDate: Date | null };

export function DateTimeRangePickerDemo() {
  const [submitted, setSubmitted] = useState<string | null>(null);

  const form = useForm
        </form>
      
      {submitted && (
        <pre className="rounded-lg border bg-muted/30 p-3 text-xs">
          {submitted}
        </pre>
      )}
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-date-time-range-picker
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [react-hook-form](https://www.npmjs.com/package/react-hook-form)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [date-fns](https://www.npmjs.com/package/date-fns)

## Usage

```tsx
import {
  DateTimeRangePicker
} from "@docyrus/ui/components/date-time-range-picker";

```

## Sizes

| Size | Description |
|------|-------------|
| `sm` | Small — `gap-1 text-sm` |
| `default` | Default — `gap-1.5` |
| `lg` | Large — `gap-2 text-lg` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `size` | `"sm"` \| `"default"` \| `"lg"` | `"default"` |
| `className` | `string` | — |