Forms

Stable - @kikita-labs/ui v1.6.1

Date Picker

Masked date input that opens a Kikita calendar in a dropdown.

Import

Date Picker composes the directive, Field, Dropdown, and Calendar public APIs.

date-picker.ts
import {
  KuiCalendarComponent,
  KuiDatePickerDirective,
  KuiDropdownComponent,
  KuiFieldComponent,
} from '@kikita-labs/ui';

Usage

Open in Playground

Bind the input and calendar to the same Date signal so typed and clicked values stay synchronized.

Type dd.mm.yyyy or choose from the calendar.

<div class="basic-date-picker-example">
  <kui-field label="Meeting date" hint="Type dd.mm.yyyy or choose from the calendar.">
    <input
      kuiDatePicker
      [(value)]="meetingDate"
      [(viewDate)]="viewDate"
      [minDate]="minDate"
      placeholder="dd.mm.yyyy"
    />
    <kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="420px">
      <kui-calendar
        flat
        showFooter
        [(value)]="meetingDate"
        [(viewDate)]="viewDate"
        [minDate]="minDate"
      />
    </kui-dropdown>
  </kui-field>
</div>

Dropdown composition

The dropdown hosts a calendar grid, so its role and width strategy differ from select-like listboxes.

  • 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.
  • Use flat on the calendar to avoid a double border inside the dropdown panel.

API

Directive inputs, outputs, and paired calendar composition verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
input[kuiDatePicker]Directive-Turns a native text input into a masked date picker trigger.
[(value)]Date | nullnullSelected date. Bind the same signal to the paired calendar.
[(viewDate)]Datecurrent monthVisible calendar month. Bind on both input and calendar for live month sync.
minDate / maxDateDate | undefinedundefinedInclusive bounds for typed values and linked calendar cells.
clearableboolean | undefinedfield optionShows a clear action when the input has a value.
disabledbooleanfalseDisables the input and prevents opening the dropdown.
readonlybooleanfalseKeeps the value readable while preventing popover opening.
invalidbooleanfalseReflects validation state from Signal Forms or direct binding.
errors / touched / touchSignal Forms control contract-Integrates with Angular Signal Forms validation and touched state.
placeholderstring'dd.mm.yyyy'Native input placeholder for the fixed display mask.
idstring | undefinedfield control idInput 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 flatbooleanfalseUse flat inside the dropdown so the calendar does not draw a second frame.

Accessibility

The input owns combobox trigger semantics and the calendar owns grid navigation.

  • 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 while keeping focus in the field.
  • 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.

Known gaps

The installed package intentionally ships single-date picking first.

  • Range date picking is not implemented for input[kuiDatePicker].
  • The mobile bottom-sheet date picker variant is not implemented.
  • The display mask is fixed to dd.MM.yyyy; there is no format input.