Date Picker
A dropdown date field that wraps Calendar in a select-style trigger — single date or start/end range, with a formatted display label and full Angular Forms (CVA) integration.
API
All inputs and configuration options for zyra-date-picker.
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | { start: Date | null; end: Date | null } | null | null | Two-way bound selection via [(value)] or ngModel — shape depends on selectionMode |
selectionMode | 'single' | 'range' | 'single' | Controls the selection behavior and the shape of value |
appearance | 'outline' | 'filled' | 'underline' | 'outline' | Trigger chrome style |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger height and font scale |
placeholder | string | 'Select date' | Shown in the trigger when no value is selected |
min | Date | null | null | Dates before this are disabled (passed through to Calendar) |
max | Date | null | null | Dates after this are disabled (passed through to Calendar) |
closeOnSelect | boolean | true | Closes the panel once a full selection is made |
clearable | boolean | true | Shows an inline clear (×) button in the trigger once a value is set |
disabled | boolean | false | Disables the trigger and panel |
opened (output) | void | - | Emits when the panel opens |
closed (output) | void | - | Emits when the panel closes |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Trigger has aria-haspopup="dialog" and reflects aria-expanded
- Panel is role="dialog" and inert while closed
- ArrowDown/Enter/Space opens the panel, Escape closes it, Tab closes and moves on
- Clicking outside the trigger and panel closes it
- Calendar's own keyboard grid navigation (arrow keys, roving tabindex) applies inside the panel