Date Picker
An input component with a dropdown calendar for selecting dates. Supports min/max restrictions, clearable selection, multiple sizes, error states, and accessible keyboard navigation.
Live Preview
Interact with the date picker in real time. Adjust size, clearable, and error state to see changes instantly.
No date selected
1<AidashDatePicker2value={date}3onChange={setDate}4size="md"5 clearable6placeholder="Pick a date"7/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the AidashDatePicker component into your file.
import { AidashDatePicker } from '@/components/aidash/date-picker';Basic Usage
The simplest way to use AidashDatePicker with default props.
1const [date, setDate] = useState<Date | null>(null);2 3<AidashDatePicker4value={date}5onChange={setDate}6/>Sizes
Three sizes to fit different layout contexts.
Small
Medium
Large
1<AidashDatePicker size="sm" placeholder="Small" />2<AidashDatePicker size="md" placeholder="Medium" />3<AidashDatePicker size="lg" placeholder="Large" />With Label
Add a label above the date picker for form context.
1<AidashDatePicker2label="Date of Birth"3placeholder="Select your birthday"4value={date}5onChange={setDate}6/>Clearable
Allow users to clear the selected date with a single click.
1<AidashDatePicker2value={date}3onChange={setDate}4clearable5/>Date Range Restriction
Restrict selectable dates with minDate and maxDate props.
Available: 7/26/2026 - 9/1/2026
1const today = new Date();2const minDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);3const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);4 5<AidashDatePicker6value={date}7onChange={setDate}8minDate={minDate}9maxDate={maxDate}10helperText="Only dates within the range are selectable"11/>Error State
Display validation errors with a red border and helper text.
This field is required
1<AidashDatePicker2value={date}3onChange={setDate}4error5helperText="This field is required"6label="Event Date"7/>Disabled State
Prevent user interaction when the date picker is disabled.
1<AidashDatePicker2value={new Date()}3disabled4label="Locked Date"5/>Custom Placeholder
Use a custom placeholder to provide context for the expected date.
1<AidashDatePicker2placeholder="When do you arrive?"3value={date}4onChange={setDate}5/>API Reference
Complete list of props accepted by AidashDatePicker.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | null | The currently selected date |
| onChange | (date: Date | null) => void | — | Callback fired when the date changes |
| placeholder | string | 'Select date' | Placeholder text when no date is selected |
| format | string | 'MM/DD/YYYY' | Display format for the selected date |
| minDate | Date | — | Earliest selectable date |
| maxDate | Date | — | Latest selectable date |
| disabled | boolean | false | Disable the date picker |
| error | boolean | false | Show error state with red border |
| helperText | string | — | Helper or error text below the input |
| label | string | — | Label text above the input |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the date picker input and calendar |
| clearable | boolean | false | Show a clear button when a date is selected |
| className | string | '' | Additional CSS classes |
format prop supports tokens: YYYY, YY, MM, M, DD, D. Example: DD/MM/YYYY for European format.Accessibility
Built-in accessibility features for keyboard navigation, ARIA attributes, and focus management.
Keyboard Navigation
Open the calendar with Enter or Space. Close with Escape. Navigate months using the arrow buttons within the calendar dropdown.
ARIA Attributes
The trigger button uses aria-haspopup="dialog" and aria-expanded to communicate dropdown state. The calendar uses role="grid" with aria-selected on day cells.
Click Outside to Close
The dropdown calendar automatically closes when clicking anywhere outside the component, using a document-level mousedown listener with proper cleanup.
Disabled Date Feedback
Dates outside the min/max range are visually dimmed and marked with aria-disabled to communicate restrictions to assistive technology.
1{/* Label provides accessible name automatically */}2<AidashDatePicker3label="Departure Date"4value={date}5onChange={setDate}6/>7 8{/* Without label, placeholder serves as aria-label */}9<AidashDatePicker10placeholder="Select departure date"11value={date}12onChange={setDate}13/>14 15{/* Error message is visually associated */}16<AidashDatePicker17error18helperText="Date is required"19value={date}20onChange={setDate}21/>Related
Other components that work well alongside Date Picker.