Skip to main content

​
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

StoryReference
DefaultStorybook
With LabelStorybook
With ValueStorybook
Custom PlaceholderStorybook
DisabledStorybook
ErrorStorybook
With Min DateStorybook
With Max DateStorybook
Date RangeStorybook
Date Range PickerStorybook
All StatesStorybook

​
API And Props

Prop or ControlSourceNotes
disabledStorybook controlSee source story for accepted values
errorStorybook controlSee source story for accepted values
placeholderStorybook controlSee source story for accepted values
labelStorybook controlSee 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

StateAsset
Equa dark themeEquaDatePicker dark theme
Light themeEquaDatePicker 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.

​
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.