Date Picker — Playground
State
<kui-field label="Meeting date">
<input kuiDatePicker [(value)]="date" [(viewDate)]="viewDate" />
<kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="420px">
<kui-calendar flat [(value)]="date" [(viewDate)]="viewDate" showFooter />
</kui-dropdown>
</kui-field>| Name | Type | Default | Description |
|---|---|---|---|
| input[kuiDatePicker] | Directive | - | Turns a native text input into a masked date picker trigger. |
| [(value)] | Date | null | null | Selected date. Bind the same signal to the paired calendar. |
| [(viewDate)] | Date | current month | Visible calendar month. Bind on both input and calendar for live month sync. |
| minDate / maxDate | Date | undefined | undefined | Inclusive bounds for typed values and linked calendar cells. |
| clearable | boolean | undefined | field option | Shows a clear action when the input has a value. |
| disabled | boolean | false | Disables the input and prevents opening the dropdown. |
| readonly | boolean | false | Keeps the value readable while preventing popover opening. |
| invalid | boolean | false | Reflects validation state from Signal Forms or direct binding. |
| errors / touched / touch | Signal Forms control contract | - | Integrates with Angular Signal Forms validation and touched state. |
| placeholder | string | 'dd.mm.yyyy' | Native input placeholder for the fixed display mask. |
| id | string | undefined | field control id | Input id. Falls back to the parent kui-field control id when present. |
| kui-dropdown panelRole | 'dialog' | 'listbox' | 'grid' | null | 'listbox' | Use dialog for the calendar popover because the panel is not a listbox. |
| kui-calendar flat | boolean | false | Use flat inside the dropdown so the calendar does not draw a second frame. |
Directive inputs, outputs, and paired calendar composition verified against @kikita-labs/ui v1.6.1 public typings.