KikitaUiDocs

Meeting date

<kui-field label="Meeting date">
  <input kuiDatePicker [(value)]="date" />
  <kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="420px">
    <kui-calendar flat showFooter />
  </kui-dropdown>
</kui-field>

No events yet.

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 \| undefined`	`locale layout`	Native input placeholder. Defaults to the day, month and year placeholder messages in the order and separators of the locale (mm/dd/yyyy, dd.mm.yyyy).
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.
format	`string \| undefined`	`'locale'`	Display and parse layout: d/dd, M/MM and yyyy tokens such as dd.MM.yyyy pin it. Resolves as the input, then defaults.datePicker.format, then the locale layout.
messages	`Partial<KuiDatePickerMessages> \| undefined`	`undefined`	Per-instance text overrides (openCalendar, closeCalendar and the day, month and year placeholder tokens). They win over scoped and root messages.
KuiDatePickerOptions	`interface`	`-`	Shape of defaults.datePicker: clearable, format, chevronIcon and clearIcon (they take precedence over defaults.icons.pickerChevron and defaults.icons.clear).

Directive inputs, outputs, provider defaults, messages and paired calendar composition verified against @kikita-labs/ui v2.0.0 public typings.

Date Picker — Playground