> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Date Picker
> A calendar-based input for selecting a single date or a date range — supports locale formatting, min/max constraints, and controlled state.
## Overview
**Date Picker** combines an input trigger with a calendar popover. It supports single date selection, date range selection, locale formatting, and min/max date constraints.
For date range selection, use `DateRangePicker`. Both components share the same API shape — `DateRangePicker` accepts `{ from: Date; to?: Date }` for its `value` prop.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { DatePicker, DateRangePicker } from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## Variants
### Single Date (Default)
The default trigger opens a calendar popover for single date selection.
Pick a date
```tsx theme={null}
```
### With Selected Value
April 1, 2026
```tsx theme={null}
```
### Date Range Picker
Apr 1, 2026 – Apr 15, 2026
```tsx theme={null}
```
### Error State
Pick a date
Please select a valid date
```tsx theme={null}
```
### Disabled
Pick a date
```tsx theme={null}
```
***
## API Reference
### DatePicker
Controlled selected date.
Callback fired when the selected date changes.
Uncontrolled default selected date.
Label displayed above the trigger input.
Trigger placeholder text shown when no date is selected.
Date format string (date-fns format). E.g. `"dd/MM/yyyy"`, `"MMM d, yyyy"`.
Earliest selectable date. Dates before this are disabled in the calendar.
Latest selectable date. Dates after this are disabled in the calendar.
Disables the picker entirely — trigger cannot be opened.
Helper or error message displayed below the trigger.
Validation state. Values: `default` · `error`
Additional Tailwind classes for the trigger container.
### DateRangePicker
Same props as `DatePicker`, except:
Controlled selected date range.
Callback fired when the selected range changes.
***
## Accessibility
* The trigger renders as a `