InputDate
Synonyme: Date Picker, Datetime Picker, Week Picker, Month Picker, Time Picker, Kalender
Beschreibung: Die InputDate-Komponente ist ein Eingabefeld für Datumswerte in verschiedenen Formaten: konkrete Daten, Wochen, Monate oder Zeitangaben. Sie bietet je nach Browser- und Gerätetyp spezialisierte Auswahldialoge (z. B. Kalender, Zeitwähler) oder Eingabemaskierungsfunktionen für intuitive Datumseingabe.
Beispiel
Standard-Datumsfeld mit dem Typ date. Die Eingabe erfolgt über direkte Zahleneingabe mit Automatisierung oder über die gerätespezifische Auswahlhilfe.
<KolInputDate _label="Geburtsdatum" _type="date" />Barrierefreiheit
- Fokusmanagement: Das Eingabefeld wird über die
Tab-Taste erreicht. Die Auswahlhilfen (z. B. Kalendermodul) können über die Leertaste oder Enter geöffnet werden. - Tastaturnavigation: Innerhalb des Auswahldialogs ermöglichen Pfeiltasten die Navigation zwischen Daten, Enter bestätigt die Auswahl.
- Manuelle Eingabe: Ermöglicht Nutzer:innen, Werte direkt zu tippen, besonders wichtig für Tastaturnutzer:innen ohne Zugriff auf die grafische Auswahlhilfe.
- Nichtfunktionale Icons: Die Icons sind per Tab-Taste nicht erreichbar, das Öffnen der Auswahlhilfen erfolgt ausschließlich über das Eingabefeld.
- Browserabhängige Einschränkungen: In Firefox funktionieren die Typen
month,timeundweeknicht mit grafischen Auswahldialogen.
Links und Referenzen
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Eingabefeld. Nach Fokuserhalt wechselt Tab durch Eingabebereiche (Tag/Monat/Jahr), danach zum nächsten Element. |
Leertaste / Enter | Öffnet die gerätespezifische Auswahlhilfe (z. B. Kalendermodul, Zeitwähler), falls verfügbar. Schließt die Auswahlhilfe nach Bestätigung. |
Pfeil-Tasten (links / rechts) | Wechselt zwischen Eingabebereichen (Tag, Monat, Jahr), wenn das Eingabefeld fokussiert ist. |
Pfeil-Tasten (oben / unten) | Erhöht oder erniedrigt den Wert im aktuell fokussierten Eingabebereich. |
Esc | Schließt einen offenen Auswahldialog. |
Best Practices / Empfehlungen
- Sinnvolle Felder kennzeichnen: Nutzen Sie
_required, um Pflichtfelder deutlich zu machen. - Validierung mit
_minund_max: Begrenzen Sie den gültigen Datumsbereich z. B. für Geburtsdaten oder Terminreservierungen. - Korrekt benennen: Stellen Sie sicher, dass
_nameund_idkorrekt gesetzt sind für Formularübermittlung. - Hinweistexte nutzen: Verwenden Sie
_hintfür Angaben zum erwarteten Format oder Einschränkungen. - Browserunterschiede kommunizieren: Machen Sie Nutzer:innen auf das Firefox-Verhalten bei
month,timeundweekaufmerksam, falls diese Typen verwendet werden. - Fallback-Eingabe ermöglichen: Prüfen Sie, dass manuelle Zahleneingabe funktioniert, falls die grafische Auswahlhilfe nicht verfügbar ist.
Anwendungsfälle
- Geburtsdatum: Erfassung des Geburtsdatums mit Typ
date - Terminbuchung: Auswahl eines Datums und optional einer Uhrzeit mit Typ
datetime-local - Rechnungsmonat: Auswahl eines Monats mit Typ
month - Schichtenplanung: Auswahl einer Karten-Woche mit Typ
week - Zeitliche Eingrenzung: Auswahl von Anfangs- und Endzeiten mit Typ
time
FAQ
Warum funktioniert der Typ week in Firefox nicht?
Firefox bietet kein grafisches Wahlmodul für Wochen an. In diesem Fall ist nur die manuelle Texteingabe möglich.
Kann ich vordefinierte Werte setzen?
Ja, über das Attribut _value mit dem entsprechenden Format (z. B. "2024-01-15" für Typ date).
Wie kann ich das Datumsfeld leeren?
Setzen Sie _value auf null oder undefined, um das Feld zu leeren.
Konstruktion / Technik
Playground
<KolInputDate _label="Erstellungsdatum" _type="date" />Funktionalitäten (mit Code)
Beschriftung und Hinweistexte
Das Eingabefeld wird mit einer Beschriftung über _label versehen. Zusätzliche Informationen können über _hint bereitgestellt werden.
<KolInputDate _hint="Bitte geben Sie Ihr Geburtsdatum ein." _label="Geburtsdatum" _type="date" />Eingabetypen
Das Attribut _type bestimmt das Format und den Auswahldialog:
<KolInputDate _label="Datum" _type="date" />Verfügbare Typen:
date: Vollständiges Datum (Standard)datetime-local: Datum und Uhrzeit ohne Zeitzonemonth: Nur Monat und Jahrtime: Nur Uhrzeit (HH:MM)week: Kalenderwoche und Jahr
Bereichsbeschränkung
Die Attribute _min und _max definieren den gültigen Datumsbereich:
<KolInputDate _label="Reservierungsdatum" _max="2025-12-31" _min="2025-01-01" _type="date" />Schrittgröße bei Zeiteingabe
Für Typ time kann die Schrittgröße über _step festgelegt werden:
<KolInputDate _label="Uhrzeit" _step="15" _type="time" />Formularattribute
Standard-Formularattribute für Validierung und Interaktion:
<KolInputDate _label="Datum" _required={true} _type="date" />Verfügbare Attribute:
_disabled: Deaktiviert das Eingabefeld (mit Begründung verwenden!)_readOnly: Verhindert Bearbeitung, erlaubt aber den Fokus_required: Kennzeichnet Pflichtfelder_hideLabel: Blendet das Label visuell aus (bleibt für assistive Technologien sichtbar)
Fehlermeldungen
Validierungsfehler oder Hinweismeldungen werden über das Attribut _msg ausgegeben:
<KolInputDate _label="Datum" _msg="Das eingegebene Datum liegt außerhalb des zulässigen Bereichs." _type="date" />Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Eingabefeld wird angeklickt | - |
focus | Eingabefeld wird fokussiert | - |
blur | Eingabefeld verliert Fokus | - |
input | Wert wird durch Eingabe oder Auswahl geändert | Aktueller Wert in ISO8601-Format |
change | Eingabe wurde durch Fokusabzug oder Enter abgeschlos. | Aktueller Wert 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
| 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 |
_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 (e.g. _icons="fa-solid fa-user"). | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | 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" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _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; } & { _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 | _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 |
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
| Slot | Description |
|---|---|
| The label of the input field. |