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

Date Time Picker component with multiple variants and sizes.

**Demo:**

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

import { useState } from 'react';

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

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

export function DateTimePickerDemo() {
  const [submitted, setSubmitted] = useState<string | null>(null);
  const [defaultValues] = useState(() => ({
    startDate: new Date(),
    endDate: new Date(Date.now() + 60 * 60 * 1000)
  }));

  const form = useForm({
    defaultValues
  });

  const onSubmit = (values: { startDate: Date; endDate: Date }) => {
    setSubmitted(JSON.stringify(values, null, 2));
  };

  return (
    <div className="w-full max-w-md space-y-4">
      
        </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-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 {
  DateTimePicker
} from "@docyrus/ui/components/date-time-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` | — |