InputDate

Synonyme: Date Picker, Datumsfeld, Datumseingabe, Datumsauswahl, Zeitfeld, Date Input

Beschreibung: Mit InputDate können Datums- und Zeitwerte eingegeben und bearbeitet werden.

Die Komponente basiert auf den nativen HTML5-Eingabetypen date, datetime-local, month, time und week und profitiert dadurch von deren Semantik sowie der standardisierten Unterstützung durch Browser und assistive Technologien.

Die Eingabe erfolgt direkt im Eingabefeld oder über den Auswahldialog des Browsers. Darstellung und Bedienung hängen dabei vom verwendeten Browser und Betriebssystem ab.

Beispiel

Standard-Datumsfeld mit dem Typ date:

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

Barrierefreiheit

• Das Eingabefeld muss mit einer aussagekräftigen Beschriftung versehen werden. Es darf visuell ausgeblendet werden, wenn der Zweck des Eingabefeldes durch den direkten visuellen Kontext absolut unmissverständlich ist.

• Im Fehlerfall wird die Fehlermeldung direkt an der Komponente dargestellt und automatisch mit ihr verknüpft, sodass sie auch assistiven Technologien zur Verfügung steht.

• Vorschlagswerte (_suggestions) werden über die native Vorschlagsliste des Browsers bereitgestellt. Deren Unterstützung durch Browser und assistive Technologien ist uneinheitlich. Verlassen Sie sich bei unverzichtbaren Eingabehilfen daher nicht ausschließlich auf diese native Autovervollständigung.

• Einige Screenreader geben leere Datumsfelder oder den schreibgeschützten Zustand nicht wie erwartet aus. Da diese Ausgaben vom Browser erzeugt werden, kann KoliBri sie nicht beeinflussen. Details finden Sie unter .

Konkrete Designentscheidungen

Entscheidung	Begründung
Verwendung nativer HTML5-Eingabetypen	Die Komponente nutzt bewusst die nativen HTML5-Eingabetypen und profitiert dadurch von deren standardisierter Unterstützung durch Browser und assistive Technologien.
Kein eigener Datepicker bzw. Zeitwähler	Die Komponente verzichtet bewusst auf eine eigene Implementierung und nutzt stattdessen die nativen Auswahldialoge des Browsers bzw. Betriebssystems. Dadurch profitieren Nutzende von einer vertrauten Bedienung und einer guten Unterstützung durch assistive Technologien. Darstellung, Tastatur- und Screenreader-Unterstützung des Dialogs hängen dabei von der jeweiligen Plattform ab.
Absenden per Enter	Die Eingabetaste im Eingabefeld sendet das umgebende Formular ab. Ist das Kalender-Symbol des Browsers fokussiert, wird das Formular nicht abgesendet; die Taste bedient dort weiterhin den Auswahldialog.
Schreibgeschützter Zustand	Bei _readOnly öffnet die Leertaste den Auswahldialog nicht.
Format-Prüfung der Werte	_value, _min und _max werden gegen das zum _type passende ISO-8601-Format geprüft. Werte in einem abweichenden Format werden nicht übernommen.

Links und Referenzen

Verwendung

• Wählen Sie über _type den zum Anwendungsfall passenden Eingabetyp (date, datetime-local, month, time oder week). Standard ist date.
• Übergeben Sie _value, _min und _max als ISO-8601-Zeichenkette im Format des gewählten Typs:

_type	Format	Beispiel
date	JJJJ-MM-TT	2025-06-30
datetime-local	JJJJ-MM-TTThh:mm bzw. JJJJ-MM-TTThh:mm:ss	2025-06-30T14:30
month	JJJJ-MM	2025-06
time	hh:mm bzw. hh:mm:ss	14:30
week	JJJJ-Www	2025-W27

• Werte, die nicht dem Format des gewählten Typs entsprechen, werden nicht übernommen.
• Date-Objekte werden für _value, _min und _max weiterhin akzeptiert und passend zum _type in eine ISO-8601-Zeichenkette umgewandelt. Diese Variante ist jedoch veraltet (deprecated) und sollte nicht mehr verwendet werden. Wurde _value als Date übergeben, liefern Events und getValue() ebenfalls ein Date, andernfalls eine Zeichenkette. Ein leeres Feld liefert null.
• Legen Sie mit _step die Schrittweite fest. Die Einheit hängt vom Typ ab: Tage bei date, Wochen bei week, Monate bei month und Sekunden bei time und datetime-local. Für 15-Minuten-Schritte setzen Sie beispielsweise _step auf 900.
• Um den Wert zu entfernen, setzen Sie _value auf null oder rufen die Methode reset() auf.

Hinweis: _min, _max und _step verhindern keine manuelle Eingabe außerhalb des zulässigen Bereichs bzw. Schrittmaßes. Die Validierung der eingegebenen Werte muss auf Anwendungsebene erfolgen.

Tastatursteuerung

Die Tastaturbedienung wird durch den Browser und das Betriebssystem bestimmt. Daher können sich einzelne Tastaturfunktionen je nach Browser und Endgerät unterscheiden.

Typischerweise werden folgende Funktionen unterstützt:

Taste	Funktion
Tab	Fokus auf das Eingabefeld, das nächste Segment bzw. das nächste fokussierbare Element setzen.
Shift+Tab	Fokus auf das vorherige Segment bzw. das vorherige fokussierbare Element setzen.
Pfeil-Tasten (links/rechts)	Zwischen den Segmenten des Werts (z. B. Tag, Monat, Jahr) wechseln.
Pfeil-Tasten (oben/unten)	Wert des fokussierten Segments erhöhen bzw. verringern.
Enter / Leertaste	Im geöffneten Auswahldialog die Auswahl bestätigen.
Esc	Geöffneten Auswahldialog schließen.
Enter (im Eingabefeld)	Umgebendes Formular absenden, sofern nicht das Kalender-Symbol fokussiert ist.

Hinweis: Das Absenden per Enter wird von KoliBri ergänzt, da das native Element im Shadow DOM der Komponente liegt: Befindet sich die Komponente innerhalb eines form- bzw. kol-form-Elements, sucht sie dieses – auch über Shadow-DOM-Grenzen hinweg – und löst dort das Absenden aus.

Ist das Kalender-Symbol des Browsers fokussiert, wird das Formular nicht abgesendet, damit die Eingabetaste dort weiterhin den Auswahldialog bedient. Bei _readOnly hat die Leertaste keine Funktion.

Best Practices / Empfehlungen

• Verwenden Sie aussagekräftige Beschriftungen (_label), damit der erwartete Datums- oder Zeitwert eindeutig erkennbar ist.
• Ergänzen Sie bei Bedarf Hinweise über _hint, beispielsweise zum zulässigen Zeitraum oder zu fachlichen Einschränkungen.
• Übergeben Sie Werte als ISO-8601-Zeichenkette statt als Date-Objekt.
• Ergänzen Sie keine zusätzlichen ARIA-Rollen oder ARIA-Attribute, um das Verhalten der nativen Eingabetypen zu verändern.
• Berücksichtigen Sie, dass sich Darstellung und Bedienung der nativen Auswahldialoge je nach Browser, Betriebssystem und Endgerät unterscheiden.

Anwendungsfälle

• Eingabe eines Geburtsdatums in Registrierungs- oder Kontaktformularen
• Auswahl eines Datums für Terminvereinbarungen oder Reservierungen
• Erfassung von Uhrzeiten, beispielsweise für Öffnungs-, Start- oder Endzeiten
• Auswahl eines Monats oder einer Kalenderwoche für Planungs- und Auswertungszeiträume
• Erfassung eines Datums mit Uhrzeit, beispielsweise für Termine oder Ereignisse

FAQ

Kann InputDate mit einem Wert vorbelegt werden?
Ja. Übergeben Sie über _value eine ISO-8601-Zeichenkette im Format des gewählten Typs, beispielsweise 2025-06-30 für den Typ date.

Warum wird mein Wert nicht angezeigt?
Vermutlich passt das Format nicht zum gewählten _type, beispielsweise ein vollständiges Datum bei _type month. Werte in einem abweichenden Format werden nicht übernommen.

Wie kann InputDate geleert werden?
Setzen Sie _value auf null oder undefined oder rufen Sie die Methode reset() auf.

Wie lege ich Zeitintervalle von 15 Minuten fest?
Die Schrittweite für time und datetime-local wird in Sekunden angegeben. Setzen Sie _step daher auf 900.

Warum sieht InputDate je nach Browser unterschiedlich aus?
Die Komponente nutzt die nativen HTML5-Eingabetypen des Browsers. Darstellung und Bedienung der Auswahldialoge werden daher vom jeweiligen Browser und Betriebssystem bestimmt.

Wird eine automatische Korrektur einer ungültigen Eingabe angekündigt?
Nein. Gibt jemand beispielsweise beim Typ date einen ungültigen Tageswert ein (z. B. „33“ statt „03“), korrigiert der Browser diesen Wert nativ, ohne dass KoliBri diese Änderung derzeit per Sprachausgabe ankündigt. Screenreader-Nutzende können die stille Korrektur dadurch leicht übersehen. Validieren Sie eingegebene Werte daher zusätzlich auf Anwendungsebene. Details siehe .

Playground

Testen Sie die verschiedenen Eigenschaften des InputDate-Feldes:

Icons

Message

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

Funktionalitäten

Einfaches Eingabefeld

Jedes Feld benötigt mindestens ein Label (_label), um für alle Nutzenden verständlich und zugänglich zu sein. Das Label wird als natives label-Element mit dem Feld verknüpft.

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

Eingabetypen

Mit _type legen Sie fest, welche Art von Datums- oder Zeitwert erfasst wird. Der Typ bestimmt das Format des Werts sowie den Auswahldialog des Browsers:

• date: Vollständiges Datum (Standard)
• datetime-local: Datum und Uhrzeit ohne Zeitzone
• month: Monat und Jahr
• time: Uhrzeit
• week: Kalenderwoche und Jahr

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

Formularattribute

Mit den folgenden Properties passen Sie das Feld an gängige Formularanforderungen an:

• _disabled: Deaktiviert das Feld. Deaktivierte Felder sind nicht fokussierbar und können nicht bearbeitet werden (mit Bedacht verwenden!).

• _readOnly: Verhindert die Bearbeitung des Feldes. Das Feld bleibt fokussierbar und lesbar. Hinter der Beschriftung erscheint zusätzlich der Hinweis „(schreibgeschützt)“; er ist vor assistiven Technologien verborgen, da der Zustand bereits über das native readonly-Attribut vermittelt wird.

• _required: Kennzeichnet das Feld als Pflichtfeld.

Die Properties werden 1:1 auf die gleichnamigen nativen HTML-Attribute des input-Elements übertragen. Bei _readOnly erscheint zusätzlich der Hinweis „(schreibgeschützt)“ hinter der Beschriftung, und die Leertaste öffnet keinen Auswahldialog.

<KolInputDate _label="Datum" _type="date" _value="2025-06-30" />

Hinweistexte und Fehlermeldungen

Mit _hint und _msg geben Sie Nutzenden zusätzliche Orientierung zur Eingabe und machen Validierungsfehler unmittelbar am Feld sichtbar:

• _hint: Ergänzende Hinweise zur Eingabe (wird immer angezeigt und über aria-describedby mit dem Feld verknüpft)
• _msg: Fehlermeldungen oder Validierungshinweise (wird nur in Verbindung mit _touched angezeigt)
• _touched: Zeigt an, ob das Feld von Nutzenden bereits angefasst wurde, und steuert damit, ob _msg sichtbar wird
• _hideMsg: Unterdrückt die Fehlermeldung am Feld, wenn sie an anderer Stelle dargestellt wird

Hinweis: _msg wird erst dann eingeblendet, wenn _touched auf true gesetzt ist. So werden Validierungsfehler nicht bereits beim ersten Rendern, sondern erst nach einer Interaktion mit dem Feld angezeigt. Handelt es sich um eine Fehlermeldung, wird das Feld zusätzlich über aria-invalid als ungültig gekennzeichnet.

Anwendungsfall für _hideMsg: Besteht eine fachliche Einheit aus mehreren Eingabefeldern innerhalb eines Field-Sets, beispielsweise ein sechsstelliger Bestätigungscode mit einem einzelnen Feld je Stelle, kann eine gemeinsame Fehlermeldung für die gesamte Gruppe sinnvoller sein als eine Meldung je Einzelfeld. In diesem Fall unterdrücken Sie die Fehlermeldung an den einzelnen Feldern über _hideMsg und stellen sie stattdessen einmalig am Field-Set dar.

Wichtig: _hideMsg blendet die Fehlermeldung nicht nur visuell aus. Die Meldung wird weder gerendert noch über aria-describedby mit dem Feld verknüpft – lediglich die Kennzeichnung über aria-invalid bleibt erhalten. Stellen Sie daher sicher, dass die gemeinsame Fehlermeldung auf Anwendungsebene für alle Nutzenden, auch für Nutzende assistiver Technologien, wahrnehmbar ist.

Message

<KolInputDate _hideMsg={false} _hint="Reservierungen sind bis zum 31.12.2025 möglich." _label="Reservierungsdatum" _msg={{ "_description": "Das eingegebene Datum liegt außerhalb des zulässigen Zeitraums." }} _touched={true} _type="date" />

Wertebereich

Mit _min und _max grenzen Sie den zulässigen Zeitraum ein. Die Grenzen wirken sich auf den Auswahldialog und die Bedienung mit den Pfeiltasten aus. Bei manueller Eingabe kann dennoch ein Wert außerhalb des Bereichs eingegeben werden, ohne dass automatisch eine Korrektur oder Fehlermeldung erfolgt. Die Validierung liegt daher in der Verantwortung der einbindenden Anwendung.

• _min: Frühester erlaubter Wert
• _max: Spätester erlaubter Wert

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

Schrittweite

Mit _step legen Sie fest, in welchen Schritten der Wert verändert werden kann. Die Einheit hängt vom Typ ab: Tage bei date, Wochen bei week, Monate bei month und Sekunden bei time und datetime-local. Im Beispiel sind für die Uhrzeit nur Viertelstunden vorgesehen (_step = 900).

<KolInputDate _label="Uhrzeit" _step={900} _type="time" />

Label ausblenden

Mit _hideLabel blenden Sie das Label visuell aus, um das Feld kompakter zu gestalten. Für assistive Technologien bleibt die Beschriftung als zugänglicher Name (aria-label) weiterhin verfügbar; sehende Nutzende erhalten sie bei Maus-Hover und Tastaturfokus als Tooltip.

<KolInputDate _hideLabel={false} _label="Geburtsdatum" _type="date" />

Icons

Mit _icons versehen Sie das Feld links und/oder rechts mit zusätzlichen Icons, um visuellen Kontext zu geben.

Verfügbare Positionen sind:

• left: Icon links vom Feld
• right: Icon rechts vom Feld

Wird ein Icon nur über seine Icon-Klasse angegeben, gilt es als dekorativ und wird vor assistiven Technologien verborgen. Trägt ein Icon eine Information, die nicht bereits aus Label oder Hinweis hervorgeht, übergeben Sie es als Objekt mit label – das Icon erhält dann eine zugängliche Beschriftung.

Icons

<KolInputDate _icons={{ "left": "kolicon-kolibri" }} _label="Termin" _type="date" />

SmartButton

Mit _smartButton platzieren Sie einen Button mit beliebiger Aktion direkt im Eingabefeld, etwa um eine zugehörige Funktion griffbereit anzubieten. Der SmartButton wird immer als Icon-Button ohne sichtbare Beschriftung dargestellt; sein _label dient als zugänglicher Name und muss die Aktion daher eindeutig beschreiben. Der SmartButton ist per Tastatur erreichbar und wird zusammen mit dem Feld deaktiviert (_disabled).

<KolInputDate _label="Mit SmartButton" _smartButton={{ "_label": "Action" }} _type="date" />

Vorschlagswerte (Suggestions)

Mit _suggestions schlagen Sie Nutzenden häufig verwendete Werte vor, um die Eingabe zu beschleunigen. Die Vorschläge werden über das native HTML-Element datalist bereitgestellt. Darstellung und Bedienung der Vorschlagsliste hängen daher vom Browser ab.

<KolInputDate _label="Wunschtermin" _suggestions={[ "2025-07-01", "2025-07-15", "2025-08-01" ]} _type="date" />

API

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Eingabefeld wird angeklickt	-
focus	Eingabefeld wird fokussiert	-
blur	Eingabefeld verliert Fokus	-
keydown	Taste wird im Eingabefeld gedrückt	-
input	Wert wird durch Eingabe oder Auswahl geändert	Aktueller Wert als ISO-8601-Zeichenkette (bzw. Date); null bei leerem Feld
change	Eingabe wurde abgeschlossen	Aktueller Wert als ISO-8601-Zeichenkette (bzw. Date); null bei leerem Feld

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

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines the key combination that can be used to trigger or focus the component's interactive element.	string | undefined	undefined
_ariaDetails	_aria-details	References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS).	string | undefined	undefined
_autoComplete	_auto-complete	Defines whether the input can be auto-completed.	string | undefined	'off'
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hideLabel	_hide-label	Hides 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 | undefined	false
_hideMsg	_hide-msg	Hides the error message but leaves it in the DOM for the input's aria-describedby.	boolean | undefined	false
_hint	_hint	Defines the hint text.	string | undefined	''
_icons	_icons	Defines the icon classnames.	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_infoPopover	_info-popover	Defines the informational popover after the label.	any	undefined
_label (required)	_label	Defines 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.	string	undefined
_max	_max	Defines 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}` | undefined	undefined
_min	_min	Defines 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}` | undefined	undefined
_msg	_msg	Defines the properties for a message rendered as Alert component.	Omit<AlertProps, "_on" | "_label" | "_level" | "_variant" | "_hasCloser"> & { _description: string; } | string | undefined	undefined
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined	undefined
_readOnly	_read-only	Makes the input element read only.	boolean | undefined	false
_required	_required	Makes the input element required.	boolean | undefined	false
_shortKey	_short-key	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	string | undefined	undefined
_smartButton	_smart-button	Allows to add a button with an arbitrary action within the element (_hide-label only).	string | undefined | { _label: string; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: VariantClassNamePropType | 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; }	undefined
_step	_step	Defines the step size for value changes.	`${number}.${number}` | `${number}` | number | undefined	undefined
_suggestions	_suggestions	Suggestions to provide for the input.	W3CInputValue[] | string | undefined	undefined
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Shows if the input was touched by a user.	boolean | undefined	false
_type	_type	Defines either the type of the component or of the components interactive element.	"date" | "datetime-local" | "month" | "time" | "week"	'date'
_value	_value	Defines 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 | undefined	undefined
_variant	_variant	Defines which variant should be used for presentation.	string | string[] | undefined	undefined

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

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

Slot	Description
	The label of the input field.
"expert"	Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot

---