Skip to main content

Your opinion matters! Together with you, we want to continuously improve KoliBri. Share your ideas, wishes, or suggestions—quickly and easily.

InputDate

This documentation is currently being revised and is in beta status. Content may still change.
This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Date Picker, Datetime Picker, Week Picker, Month Picker, Time Picker, Calendar

Description: The InputDate component is an input field for date values in various formats: specific dates, weeks, months, or time values. Depending on the browser and device type, it provides specialized selection dialogs (e.g. calendar, time picker) or input masking functions for intuitive date input.

Example​

Standard date field with type date. Input is done via direct digit entry with automation or via the device-specific selection helper.

<KolInputDate _label="Date of birth" _type="date" />

Accessibility​

  • Focus management: The input field is reached via the Tab key. Selection helpers (e.g. calendar module) can be opened via the Space or Enter key.
  • Keyboard navigation: Within the selection dialog, arrow keys allow navigation between dates, Enter confirms the selection.
  • Manual entry: Allows users to type values directly, which is particularly important for keyboard users without access to the graphical selection helper.
  • Non-functional icons: Icons are not reachable via the Tab key; selection helpers are opened exclusively via the input field.
  • Browser-dependent limitations: In Firefox, the types month, time, and week do not work with graphical selection dialogs.

Usage​

Keyboard controls​

KeyFunction
TabFocuses the input field. After receiving focus, Tab switches through input areas (day/month/year), then to the next element.
Space / EnterOpens the device-specific selection helper (e.g. calendar module, time picker) if available. Closes the selection helper after confirmation.
Arrow keys (left/right)Switches between input areas (day, month, year) when the input field is focused.
Arrow keys (up/down)Increases or decreases the value in the currently focused input area.
EscCloses an open selection dialog.

Best practices / Recommendations​

  • Mark required fields clearly: Use _required to clearly mark mandatory fields.
  • Validation with _min and _max: Limit the valid date range e.g. for dates of birth or appointment bookings.
  • Correct naming: Ensure _name and _id are set correctly for form submission.
  • Use hint texts: Use _hint for information about the expected format or restrictions.
  • Communicate browser differences: Inform users about Firefox behavior with month, time, and week if these types are used.
  • Allow fallback input: Verify that manual digit input works when the graphical selection helper is unavailable.

Use cases​

  • Date of birth: Capturing date of birth with type date
  • Appointment booking: Selecting a date and optionally a time with type datetime-local
  • Invoice month: Selecting a month with type month
  • Shift planning: Selecting a calendar week with type week
  • Time range: Selecting start and end times with type time

FAQ​

Why does the week type not work in Firefox?
Firefox does not provide a graphical selection module for weeks. In this case, only manual text input is possible.

Can I set predefined values?
Yes, via the _value attribute with the corresponding format (e.g. "2024-01-15" for type date).

How can I clear the date field?
Set _value to null or undefined to clear the field.

Construction / Technical​

Playground​

Icons
Message
<KolInputDate _label="Creation Date" _type="date" />

Functionality (with code)​

Label and hint texts​

The input field is given a label via _label. Additional information can be provided via _hint.

<KolInputDate _hint="Please enter your date of birth." _label="Date of birth" _type="date" />

Input types​

The _type attribute determines the format and selection dialog:

<KolInputDate _label="Date" _type="date" />

Available types:

  • date: Full date (default)
  • datetime-local: Date and time without timezone
  • month: Month and year only
  • time: Time only (HH:MM)
  • week: Calendar week and year

Range restriction​

The _min and _max attributes define the valid date range:

<KolInputDate _label="Reservation date" _max="2025-12-31" _min="2025-01-01" _type="date" />

Step size for time input​

For type time, the step size can be set via _step:

<KolInputDate _label="Time" _step="15" _type="time" />

Form attributes​

Standard form attributes for validation and interaction:

<KolInputDate _label="Date" _required={true} _type="date" />

Available attributes:

  • _disabled: Disables the input field (use with justification!)
  • _readOnly: Prevents editing but allows focus
  • _required: Marks required fields
  • _hideLabel: Visually hides the label (remains visible to assistive technologies)

Error messages​

Validation errors or hint messages are displayed via the _msg attribute:

Message
<KolInputDate _label="Date" _msg="The entered date is outside the permitted range." _type="date" />

Events​

For the handling of events or callbacks, see .

EventTriggerValue
clickInput field is clicked-
focusInput field is focused-
blurInput field loses focus-
inputValue is changed by input or selectionCurrent value in ISO8601 format
changeInput completed by focus loss or EnterCurrent value in ISO8601 format

API​

Overview​

The Date input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.

Properties​

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines the key combination that can be used to trigger or focus the component's interactive element.string | undefinedundefined
_autoComplete_auto-completeDefines whether the input can be auto-completed.string | undefined'off'
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_hideMsg_hide-msgHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.stringundefined
_max_maxDefines the maximum value of the element.Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefinedundefined
_min_minDefines the smallest possible input value.Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefinedundefined
_msg_msgDefines the properties for a message rendered as Alert component.Omit<AlertProps, "_on" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _description: string; } | string | undefinedundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefinedundefined
_readOnly_read-onlyMakes the input element read only.boolean | undefinedfalse
_required_requiredMakes the input element required.boolean | undefinedfalse
_shortKey_short-keyAdds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.string | undefinedundefined
_smartButton_smart-buttonAllows to add a button with an arbitrary action within the element (_hide-label only).string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }undefined
_step_stepDefines the step size for value changes.`${number}.${number}` | `${number}` | number | undefinedundefined
_suggestions_suggestionsSuggestions to provide for the input.W3CInputValue[] | string | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_type_typeDefines either the type of the component or of the components interactive element."date" | "datetime-local" | "month" | "time" | "week"'date'
_value_valueDefines the value of the element.Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | undefinedundefined

Methods​

click​

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns​

Type: Promise<void>

focus() => Promise<void>​

Sets focus on the internal element.

Returns​

Type: Promise<void>

getValue() => Promise<string | Date | undefined | null>​

Returns the current value.

Returns​

Type: Promise<string | Date | null | undefined>

reset() => Promise<void>​

Resets the component's value.

Returns​

Type: Promise<void>

Slots​

SlotDescription
The label of the input field.