@edux-design/date-picker

Date selection primitives for choosing a single date or a date range from editable text fields and a shared calendar popup. The package is being built in milestones: this release includes both single-date and range foundations, while more advanced date-grid keyboard work is still planned.

Installation

npm install @edux-design/date-picker @edux-design/forms @edux-design/icons @edux-design/popovers @edux-design/utils

The package ships React components and depends on react@^19.1.0 / react-dom@^19.1.0.

Usage

import { DatePicker } from "@edux-design/date-picker";

export function PublishDateField() {
  return (
    <DatePicker
      label="Publish date"
      placeholder="Select a date"
      defaultValue={new Date(2026, 6, 8)}
    />
  );
}

import { DateRangePicker } from "@edux-design/date-picker";

export function AvailabilityField() {
  return (
    <DateRangePicker
      label="Availability"
      defaultValue={{
        startDate: new Date(2026, 6, 8),
        endDate: new Date(2026, 6, 12),
      }}
    />
  );
}

Key Props

| Prop | Description | | ---- | ----------- | | value / defaultValue | Controlled or uncontrolled selected date. | | onChange | Called with the selected Date when a day is chosen or parsed from input. | | locale | Locale used for month and date formatting. | | formatDate | Custom formatter for the input and trigger labels. | | customParseDate | Custom parser for manual text input. | | minValue / maxValue | Disable dates outside the allowed time window. | | weekStartsOn | Overrides the first day of the week in the calendar grid. | | isCompact | Applies the smaller input size. | | portalContainer | Overrides the popover portal container when used inside other overlays. | | trigger | Optional custom trigger element that toggles the calendar popover. |

DateRangePicker accepts the same formatting, parsing, locale, compact, and min/max props, but its value shape is { startDate, endDate }.

By default, focusing the input opens the popover. No calendar icon button is rendered unless you pass a custom trigger.

Accessibility

• The text input remains the primary field control and exposes aria-haspopup="dialog", aria-expanded, and aria-controls when the calendar is available.
• If you pass a custom trigger, it is enhanced with the popover wiring, and the picker only falls back to an aria-label when the trigger does not already expose one.
• DateRangePicker keeps the same combobox and trigger semantics while exposing a two-click range selection model in the shared calendar.
• If you provide helper or error text, the component wires it through Field.Feedback so aria-describedby stays attached to the input.

Milestone 1 does not yet include the full WAI-ARIA date-grid keyboard model. That work is planned for the next implementation milestone before the component should be treated as production-ready.

Development

npm run build --workspace @edux-design/date-picker
npm test -- packages/date-picker/src/elements/DatePicker.test.jsx packages/date-picker/src/elements/DatePicker.a11y.test.jsx packages/date-picker/src/elements/DateRangePicker.test.jsx packages/date-picker/src/elements/DateRangePicker.a11y.test.jsx

Stories live under src/demos/DatePicker.stories.jsx.