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/maxDatebound the selectable days, compared by calendar day. A typed or programmatic out-of-range value is kept and reported assenseDateMin/senseDateMaxthroughNG_VALIDATORS.showTimeadds 24-hour hour/minute spinbuttons; the boundDatekeeps its time and the input readsYYYY-MM-DD HH:mm.minuteStepsets the minute increment.timeOnlydrops the calendar and readsHH:mm; onlygetHours()/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
ariaLabelwhen no visible label is associated.