> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.
# EquaDatePicker
> Design system reference for EquaDatePicker, including Storybook, Figma, screenshots, and usage guidance
# EquaDatePicker
> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaDatePicker.stories.tsx`, Line: 6
## Purpose
Date selection controls for legal, finance, and equity workflows.
## Storybook
| Story | Reference |
| ------------------ | ----------------------------------------------------------------------------------- |
| Default | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--default) |
| With Label | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--with-label) |
| With Value | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--with-value) |
| Custom Placeholder | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--custom-placeholder) |
| Disabled | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--disabled) |
| Error | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--error) |
| With Min Date | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--with-min-date) |
| With Max Date | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--with-max-date) |
| Date Range | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--date-range) |
| Date Range Picker | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--date-range-picker) |
| All States | [Storybook](http://localhost:6006/?path=/story/equa-datepicker--all-states) |
## API And Props
| Prop or Control | Source | Notes |
| --------------- | ----------------- | ------------------------------------ |
| `disabled` | Storybook control | See source story for accepted values |
| `error` | Storybook control | See source story for accepted values |
| `placeholder` | Storybook control | See source story for accepted values |
| `label` | Storybook control | See source story for accepted values |
Sources:
* `equa-patternlib-nextjs/src/components/datepicker/datepicker.tsx`, Line: 5
* `equa-patternlib-nextjs/src/components/datepicker/index.ts`
* `equa-patternlib-nextjs/stories/EquaDatePicker.stories.tsx`, Line: 6
## Figma
UNVERIFIED -- requires Figma node assignment
## Screenshots
| State | Asset |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | 
|
| Light theme | 
|
## Usage Notes
* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).
## Accessibility Notes
* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.