## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/date-picker.json ``` ## Usage ```tsx import { DatePicker } from "@/components/ui/date-picker" export function DatePickerExample() { const [selectedDate, setSelectedDate] = useState(null) return ( ) } ``` ## Examples ### Basic Date Picker ```tsx const [date, setDate] = useState(null) ``` ### With Date Restrictions ```tsx const [date, setDate] = useState(null) const today = new Date() const maxDate = new Date() maxDate.setDate(today.getDate() + 30) // 30 days from now ``` ### With Blackout Dates ```tsx const [date, setDate] = useState(null) const blackoutDates = [ new Date('2024-12-25'), // Christmas new Date('2024-01-01'), // New Year's Day ] ``` ### Custom Availability Check ```tsx const [date, setDate] = useState(null) const isDateAvailable = (date: Date) => { // No delivery on Sundays return date.getDay() !== 0 } ``` ## API Reference ### DatePicker | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `Date \| null` | `null` | Currently selected date | | `onChange` | `(date: Date \| null) => void` | - | Callback when date changes | | `isDateAvailable` | `(date: Date) => boolean` | - | Custom function to check date availability | | `minDate` | `Date` | - | Earliest selectable date | | `maxDate` | `Date` | - | Latest selectable date | | `placeholder` | `string` | `"Pick a date"` | Placeholder text when no date selected | | `blackoutDates` | `Date[]` | `[]` | Array of unavailable dates | | `highlightToday` | `boolean` | `true` | Whether to highlight today's date | | `weekStartsOn` | `0 \| 1` | `0` | First day of week (0=Sunday, 1=Monday) | | `className` | `string` | - | Additional CSS classes | | `disabled` | `boolean` | `false` | Whether the picker is disabled | ## Features - **Date Validation**: Built-in min/max date constraints - **Availability Control**: Custom availability checking function - **Blackout Dates**: Exclude specific dates from selection - **Responsive Design**: Works on mobile and desktop - **Keyboard Navigation**: Full keyboard accessibility - **Internationalization**: Supports different week start days - **Today Highlighting**: Optional highlighting of current date ## Accessibility This component follows WAI-ARIA authoring practices including keyboard navigation, screen reader support, and proper focus management. ## Styling The component uses CSS custom properties for theming and can be customized using the `className` prop or by overriding the default Tailwind classes.