ArtificialSenseDocs

Docs / Components

SenseDatePickerComponent

Calendar date picker with forms CVA support and keyboard-accessible month grid from @artificialsenselabs/ui.

Live demo: run nx serve showcase and open /components/date-picker (port 4202).

Overview

Category: Form controls. Selector: sense-date-picker. Import: import { SenseDatePickerComponent } from '@artificialsenselabs/ui';

Range and time of day

  • minDate / maxDate bound the selectable days, compared by calendar day. A typed or programmatic out-of-range value is kept and reported as senseDateMin / senseDateMax through NG_VALIDATORS.
  • showTime adds 24-hour hour/minute spinbuttons; the bound Date keeps its time and the input reads YYYY-MM-DD HH:mm. minuteStep sets the minute increment.
  • timeOnly drops the calendar and reads HH:mm; only getHours() / getMinutes() of the value are meaningful (its date part is the previous value's day, or today).

Accessibility

  • Trigger exposes combobox semantics with an associated calendar grid.
  • Arrow keys navigate days; Home/End and Page Up/Down move by week or month.
  • Out-of-range days are aria-disabled, and keyboard focus is clamped so it never lands on one.
  • Hour and minute are APG spinbuttons: Arrow Up/Down step and wrap, Home/End jump to the limits.
  • Provide ariaLabel when no visible label is associated.