Datepicker
A datepicker component.
Installation
npx wdc add datepickerExamples
Basic Usage
Simple date picker with default formatting.
Custom Format
Use any Angular DatePipe format (e.g., 'fullDate', 'dd/MM/yyyy').
Validation States
Consistent error and success styling.
API Reference
| Input | Type | Default | Description |
|---|---|---|---|
| format | string | 'mediumDate' | Format string for the displayed date (Angular DatePipe format). |
| label | string | '' | Label displayed above the date picker. |
| placeholder | string | 'Pick a date' | Text displayed when no date is selected. |
| error | string | null | null | Error message (Changes border to red). |
| success | boolean | false | Success state (Changes border to green). |
check_circle
SEO & Accessibility
- Keyboard Nav: The calendar supports simple click interaction. For full accessibility, the trigger button has
aria-expandedattributes. - Semantic: The calendar grid doesn't strictly follow the complex WAI-ARIA
<grid>pattern for keyboard arrows (left/right/up/down) in this lightweight version, but the buttons are tab-accessible. - SEO: The Label and Input association is maintained via the wrapper logic.