Date Picker

<div class="basic-date-picker-example">
  <kui-field
    label="Meeting date"
    hint="Type the date in your locale's layout or choose from the calendar."
  >
    <input kuiDatePicker [(value)]="meetingDate" [minDate]="minDate" [maxDate]="maxDate" />
    <kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="420px">
      <kui-calendar flat showFooter />
    </kui-dropdown>
  </kui-field>
</div>

Manual binding of value, viewDate and the bounds on the calendar still works and is not deprecated; both patterns converge on the same state without looping.

<!-- Still supported: bind the calendar yourself (not deprecated) -->
<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>

<div class="date-picker-format-example">
  <kui-field label="Locale layout" hint="Follows the locale of the nearest i18n level.">
    <input kuiDatePicker [(value)]="localeDate" />
    <kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="420px">
      <kui-calendar flat />
    </kui-dropdown>
  </kui-field>

  <kui-field label="Pinned layout" hint="format pins dd.MM.yyyy whatever the locale is.">
    <input kuiDatePicker format="dd.MM.yyyy" [(value)]="pinnedDate" />
    <kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="420px">
      <kui-calendar flat />
    </kui-dropdown>
  </kui-field>
</div>

• The layout follows the locale of the nearest i18n level: 10/03/2026 in en-US, 03.10.2026 in ru-RU and 2026/10/03 in ja-JP. The placeholder is built from the dayPlaceholder, monthPlaceholder and yearPlaceholder messages in the same order and separators.
• format takes d/dd, M/MM and yyyy tokens such as dd.MM.yyyy and resolves as the input, then defaults.datePicker.format, then the locale.
• Parsing reads three digit groups in the layout's order, so 3.1.2026 is accepted where 03.01.2026 is shown. Surrounding whitespace is trimmed and four-digit years from 0000 through 9999 are preserved.

• Typing an out-of-format value sets aria-invalid and data-kui-invalid without replacing the last parsed value.
• A parseable date outside the bounds updates value and viewDate to the typed date but keeps the field invalid, while the linked calendar disables the cells outside the range. Typing a valid in-range date clears the invalid state.
• readonly shows the value but never opens the popover; clearable defaults to true and shows a clear button once there is a value.

• Use panelRole="dialog" because the panel contains a calendar grid.
• Use panelWidth="auto" so the panel keeps the calendar's own fixed width instead of stretching to the field's width.
• Use maxHeight as a viewport safety cap for constrained spaces.
• The panel is wider than the field on purpose: the calendar has a fixed width (--kui-calendar-width, 296px) that panelWidth="auto" keeps.
• Use flat on the calendar to avoid a double border inside the dropdown panel.

• The input exposes role="combobox", dialog popup state, and invalid state.
• ArrowDown opens the popover; a second ArrowDown moves focus into the calendar grid.
• Escape closes the popover and returns focus to the field.
• Choosing a date in the calendar returns focus to the control, and with Angular Signal Forms the field gates the required error and aria-invalid until the control is touched.
• Use kui-field labels and hints so the native input has a clear accessible name and description.
• Assistive-technology review is still pending for the newest date primitives.

• Range date picking is not implemented for input[kuiDatePicker].
• The mobile bottom-sheet date picker variant is not implemented.

• The class is KuiDatePicker (it was KuiDatePickerDirective); ng update @kikita-labs/ui renames the imports of the directive, calendar, dropdown and field.
• The display and parse layout follows the locale (it was a fixed dd.MM.yyyy); set format="dd.MM.yyyy" or defaults.datePicker.format to keep the old layout. The placeholder is built from messages in the locale's order.
• A sibling kui-calendar in the same field is wired automatically (value, viewDate and the bounds); manual binding keeps working.
• clearable resolves as local input > defaults.datePicker > defaults.field; kuiProvideFieldOptions is deprecated until 3.0.