DatePicker

forms

Calendar-based date picker with month navigation, today highlight, selected state, weekday headers, and keyboard-accessible day buttons. Token-driven styling for all visual elements.

Import

typescript
import { DatePicker } from "packages/ui/src";

Props

DatePickerProps

PropTypeRequired
valueDateNo
onChange(date) => voidNo

Examples

Date Picker

Calendar-based date picker with month navigation and today highlight.

Interactive

May 2026
SuMoTuWeThFrSa

Pre-selected Date

April 2026
SuMoTuWeThFrSa

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionCalendar-based date picker with month navigation, today highlight, selected state, weekday headers, and keyboard-accessible day buttons. Token-driven styling for all visual elements.
PropsDatePickerProps (value?: Date, onChange?: (date) => void)
Statesno-selection, date-selected, today-highlighted, month-navigated
A11y
  • Container has role=group with aria-label
  • Grid has role=grid with aria-label
  • Day buttons have aria-pressed for selection
  • Today has aria-current=date
  • Month label has aria-live=polite
  • Nav buttons have aria-label
Responsive
  • Inline-block by default
  • 7-column grid auto-sizes
Motion
  • Background transition on day hover
Token Dependencies
  • components.datePicker.background
  • components.datePicker.borderColor
  • components.datePicker.borderRadius
  • components.datePicker.padding
  • components.datePicker.shadow
  • components.datePicker.headerColor
  • components.datePicker.headerFontSize
  • components.datePicker.dayColor
  • components.datePicker.dayHoverBackground
  • components.datePicker.daySelectedBackground
  • components.datePicker.daySelectedColor
  • components.datePicker.dayTodayBorder
  • components.datePicker.daySize
  • components.datePicker.dayFontSize
  • components.datePicker.weekdayColor
  • components.datePicker.navColor
  • components.datePicker.navHoverColor
Content Slotsvalue (Date), monthLabel (auto-generated)
CMS Bindings
  • Default date from CMS field
  • Date format from CMS config
Test Cases
  • Renders calendar grid
  • Shows current month label
  • Has weekday headers
  • Clicking a day calls onChange
  • Selected day has selected class
  • Today has today class
  • Previous month navigation works
  • Passes className through