Prepared Docs

Overview

DateTimePicker stacks a DatePicker with one or two native <input type="time"> fields (via TimePicker or TimeRangeInputs). The grid ships react-day-picker semantics; the time inputs inherit platform accessibility. The component does not wrap itself in a landmark or announce draft or committed values—the app owns the group name, labels for each time field, and any Apply-time announcement.

What the component handles

Grid semantics. react-day-picker roles on the date grid (roving tabindex, arrow-key navigation, aria-selected, aria-disabled).
Time fields. TimePicker renders <input type="time"> with an @prepared911/ui-core Label. TimeRangeInputs renders two of them with an en-dash separator and localized "From" / "To" labels.
Range clamping. When maxRange is set and the operator pushes the end beyond the cap, the component clamps the value and the field updates in place: assistive tech hears the change.
Deferred commits. With onApply, drafts stay internal and only Apply emits onChange to the parent.

What you must provide

Group accessible name. Wrap the picker in role="group" with an aria-label / aria-labelledby when hosted in a popover or form section.
Distinct time labels. TimeRangeInputs ships labels; if you compose TimePicker directly, set label on each.
Committed-value echo. Apply does not announce the full date-plus-time value. Render a summary line or use a polite live region.
Timezone copy. Indicate the stored timezone when it's not local to the operator.

Keyboard behavior

Tab / Shift+Tab moves from the grid into the time fields (in order: start, then end in range mode), then to Apply / Reset if set.
Arrow keys inside the grid match DatePicker.
Time fields use native <input type="time">; keyboard handling is platform-defined (arrow keys typically adjust the focused segment: hours, minutes, or AM/PM).
Enter / Space activates Apply / Reset.

Semantics and roles

Root wrapper. No landmark by default.
Grid. role="grid" with role="gridcell" cells from react-day-picker.
Time inputs. <input type="time"> with an adjacent Label.
Apply / Reset. Native <button> via @prepared911/ui-core Button.

Focus management

The picker does not move focus on mount or on Apply. When hosted in a popover, focus the grid (or your preferred entry point) when the popover opens and restore focus to the trigger when it closes.

Known caveats

Multiple pickers on one screen need distinct ids. The underlying time Input uses id for its Label; reusing ids breaks the label association.
Native time input varies by browser. Test in the browsers your operators use; some render a custom segmented input, others a simple text field.
Pending state isn't announced. When onApply is present, make the draft-vs-committed distinction obvious in visible copy near the control.
Timezone is implicit. The committed value is a Date; the timezone assumption lives in the app.

Date Time Picker / API and Development

Event Recurrence Picker / Usage

Overview

What the component handles

What you must provide

Overview

What the component handles

Grid semantics. react-day-picker roles on the date grid (roving tabindex, arrow-key navigation, aria-selected, aria-disabled).
Time fields. TimePicker renders <input type="time"> with an @prepared911/ui-core Label. TimeRangeInputs renders two of them with an en-dash separator and localized "From" / "To" labels.
Range clamping. When maxRange is set and the operator pushes the end beyond the cap, the component clamps the value and the field updates in place: assistive tech hears the change.
Deferred commits. With onApply, drafts stay internal and only Apply emits onChange to the parent.

What you must provide

Group accessible name. Wrap the picker in role="group" with an aria-label / aria-labelledby when hosted in a popover or form section.
Distinct time labels. TimeRangeInputs ships labels; if you compose TimePicker directly, set label on each.
Committed-value echo. Apply does not announce the full date-plus-time value. Render a summary line or use a polite live region.
Timezone copy. Indicate the stored timezone when it's not local to the operator.

Keyboard behavior

Tab / Shift+Tab moves from the grid into the time fields (in order: start, then end in range mode), then to Apply / Reset if set.
Arrow keys inside the grid match DatePicker.
Time fields use native <input type="time">; keyboard handling is platform-defined (arrow keys typically adjust the focused segment: hours, minutes, or AM/PM).
Enter / Space activates Apply / Reset.

Semantics and roles

Root wrapper. No landmark by default.
Grid. role="grid" with role="gridcell" cells from react-day-picker.
Time inputs. <input type="time"> with an adjacent Label.
Apply / Reset. Native <button> via @prepared911/ui-core Button.

Focus management

The picker does not move focus on mount or on Apply. When hosted in a popover, focus the grid (or your preferred entry point) when the popover opens and restore focus to the trigger when it closes.

Known caveats

Multiple pickers on one screen need distinct ids. The underlying time Input uses id for its Label; reusing ids breaks the label association.
Native time input varies by browser. Test in the browsers your operators use; some render a custom segmented input, others a simple text field.
Pending state isn't announced. When onApply is present, make the draft-vs-committed distinction obvious in visible copy near the control.
Timezone is implicit. The committed value is a Date; the timezone assumption lives in the app.

Date Time Picker / API and Development

Event Recurrence Picker / Usage

Overview

What the component handles

What you must provide