@neynar/ui/llm-docs/date-picker.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# DatePicker

**Type**: component

DatePicker - A comprehensive date selection component with popover calendar interface A polished date selection component that combines an accessible trigger button with a full-featured calendar popover. Built on Radix UI Popover and Calendar primitives with shadcn/ui styling, providing intuitive date selection with proper accessibility, keyboard navigation, automatic positioning, and internationalization support. The component handles both controlled and uncontrolled usage patterns, integrates seamlessly with forms and validation systems, and provides consistent date formatting using date-fns. The popover automatically positions itself to stay within viewport bounds and includes smooth animations for a polished user experience.

## JSX Usage

```jsx
import { DatePicker } from '@neynar/ui';

<DatePicker
  date={value}
  onDateChange={handleDateChange}
  placeholder="value"
  disabled={true}
  className="value"
/>
```

## Component Props

### date
- **Type**: `Date`
- **Required**: No
- **Description**: No description available

### onDateChange
- **Type**: `(date: Date | undefined) => void`
- **Required**: No
- **Description**: No description available

### placeholder
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic controlled date picker
const [date, setDate] = useState<Date>();
<DatePicker
  date={date}
  onDateChange={setDate}
  placeholder="Select date"
/>
```
### Example 2
```tsx
// Date picker for forms with validation
const [birthDate, setBirthDate] = useState<Date>();
<DatePicker
  date={birthDate}
  onDateChange={setBirthDate}
  placeholder="Select birth date"
  className="w-[280px]"
  disabled={isSubmitting}
/>
```
### Example 3
```tsx
// Date range start/end picker
<div className="flex gap-2 items-center">
  <DatePicker
    date={startDate}
    onDateChange={setStartDate}
    placeholder="Start date"
    className="w-[180px]"
  />
  <span>to</span>
  <DatePicker
    date={endDate}
    onDateChange={setEndDate}
    placeholder="End date"
    className="w-[180px]"
  />
</div>
```