DatePicker

molecules

Calendar date picker with 24h time support. Replaces jQuery UI datepicker.

ARIA Role: dialog

Demo

Demo for DatePicker (molecules)

Calendar date picker with 24h time support. Replaces jQuery UI datepicker.

Props

Prop	Type	Required	Default	Description
`value`	`Date`	No	`—`	Selected date
`onChange`	`(date: Date) => void`	Yes	`—`	Date change handler
`minDate`	`Date`	No	`—`	Minimum selectable date
`maxDate`	`Date`	No	`—`	Maximum selectable date
`disabled`	`boolean`	No	`false`	Disabled state
`label`	`string`	No	`—`	Field label
`error`	`string`	No	`—`	Validation error message

TypeScript Interface

interface DatePickerProps {
  value?: Date;
  onChange: (date: Date) => void;
  minDate?: Date;
  maxDate?: Date;
  disabled?: boolean;
  label?: string;
  error?: string;
}

Assertions (NASA Rule 5)

[aria]Input must have aria-haspopup='dialog'(WAI-ARIA APG)
[aria]Calendar grid uses role='grid' with role='gridcell' days(WAI-ARIA APG)
[keyboard]Arrow keys navigate dates, PageUp/Down change month(WCAG 2.1.1)
[validation]min/max must be valid ISO 8601 dates(ISO 8601)

Usage

Import

import { Datepicker } from '@epasslive/design-system'

Basic

<Datepicker />

With Variants

<Datepicker variant="primary" size="md" />