InputDate

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

Der Input-Typ Date erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben.

Konstruktion

Code

<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>

Beispiel

Datum entfernen

Folgendes Beispiel zeigt eine Component in React, die die Möglichkeit bietet über einen Button den Wert im Datumsfeld zu entfernen.

const ClearableDateInput = () => {
 const [value, setValue] = useState<Date>();
 return (
 <>
 <KolInputDate
 _label="Lorem ipsum dolor sit"
 _value={value}
 _on={{ onChange: (_, v: Date) => setValue(v) }}
 />
 {/* Set null as value to clear the inputs value. */}
 <KolButton _on={{ onClick: () => setValue(null) }} _label="Clear" />
 </>
 );
};

Events

Events der Komponente können über eine _on-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:

kolibriElement._on = {
 onFocus: (event) => {
  /* Do something on focus */
 },
 onInput: (event, value) => {
  /* Do something with value or event */
 },
 // ...
};

Event	Auslöser	Value
onFocus	Element wird fokussiert	-
onClick	Element wird angeklickt	-
onInput	Datum wird gesetzt bzw. ändert sich (entspricht nativem input-Event)	Eingegebenes Datum als ISO8601 String
onChange	Datum wird gesetzt bzw. ändert sich (entspricht nativem change-Event)	Eingegebenes Datum als ISO8601 String
onBlur	Element verliert Fokus	-

Verwendung

Die InputDate-Komponente kann für die Erfassung von Daten verwendet werden. Es verwendet intern die InputNumber-Komponente.

Beachten Sie, dass im Firefox nicht alle _types der InputDate-Komponente funktional sind. Es werden bei den Typen month, time und week keine Auswahldialoge angezeigt.

Die Komponente zeichnet sich dadurch aus, dass sie zahlreiche Ziffern-basierte Eingabemuster unterstützt. Hierbei ist es wichtig zu beachten, dass sich das Verhalten bei der Eingabe von Browser zu Browser und Geräte zu Gerät unterscheiden kann. Beispielsweise ist es möglich beim Datum, 01.01.999999 einzugeben, auch wenn max=2022-02-02 ist. Der Feldwert ist aber trotzdem 2022-02-02.

Best practices

• Achten sie darauf id und name korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.

Barrierefreiheit

Die Icons in der Komponente sind per Tab-Taste nicht erreichbar. Die Auswahlhilfen der Komponente werden über die Leertaste geöffnet. So erhalten Sie beispielsweise beim Typ date ein Kalendermodul, über das per Maus oder über die Tastatur das gewünschte Datum ausgewählt werden kann. Die manuelle Eingabe der Werte ist alternativ möglich.

Tastatursteuerung

Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Datum, Uhrzeit u.a). Mit der Tab-Taste wird der Fokus auf das Eingabefeld gesetzt. Anschließend kann mittels der Leer-Taste das gerätespezifische Auswahldialog geöffent werden.

Hinweis: Wir haben in unseren Tests festgestellt, dass es je nach Browser-Version manchmal möglich ist, das Kalender-Icon anzufokusieren und mal nicht. Ohne das sich die Implementierung der Komponente geändert hat. Warum das so ist ist uns noch nicht bekannt. Nichtsdestotrotz ist das Öffnen des Auswahldialogs immer mittels der Leer-Taste möglich.

Taste	Funktion
Tab	Fokussiert das Eingabefeld. Nach erhalt des Fokus wechselt die Tab-Taste durch die Eingabebereiche. Danach erst wechselt die Tab-Taste zum nächsten Eingabefeld.
Leer	Wenn das Eingabefeld fokussiert ist, kann im Browser mit der Leer-Taste ein Auswahldialog aufgerufen bzw. geschlossen werden. Die Navigation und Auswahl erfolgt hier mit Hilfe der Tab-Taste, der Pfeil-Tasten und der Bestätigung mittes Enter-Taste.
Pfeil-Tasten (links / rechts)	Wenn das Eingabefeld fokussiert ist, kann mit den Pfeil-Tasten zwischen den Eingabebereichen gewechselt werden.
Pfeil-Tasten (oben / unten)	Wenn ein Eingabebereich aktiviert ist, können mit den Pfeil-Tasten oben und unten die Werte verändert werden.
Esc	Ist ein Auswahldialog verfügbar, kann dieser alternativ zur Leer-Taste oder auch mit der Esc-Taste geschlossen werden.

Links und Referenzen

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines which key combination can be used to trigger or focus the interactive element of the component.	string | undefined	undefined
_alert	_alert	Defines whether the screen-readers should read out the notification.	boolean | undefined	true
_autoComplete	_auto-complete	Defines whether the input can be auto-completed.	"off" | "on" | undefined	undefined
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_error	_error	[DEPRECATED] Will be removed in v3. Use msg instead. Defines the error message text.	string | undefined	undefined
_hideError	_hide-error	Hides the error message but leaves it in the DOM for the input's aria-describedby.	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
_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
_id	_id	Defines the internal ID of the primary component element.	string | 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 largest 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
_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	--	Defines the properties for a message rendered as Alert component.	undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "default" | "info" | "success" | "warning" | "error" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }	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 | undefined	undefined
_readOnly	_read-only	Makes the input element read only.	boolean | undefined	false
_required	_required	Makes the input element required.	boolean | undefined	false
_smartButton	_smart-button	Allows to add a button with an arbitrary action within the element (_hide-label only).	string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean | undefined; _role?: AlternativeButtonLinkRolePropType | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: "primary" | "secondary" | "normal" | "tertiary" | "danger" | "ghost" | "custom" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _accessKey?: string | undefined; }	undefined
_step	_step	Defines the step size for value changes.	number | undefined	undefined
_suggestions	_suggestions	Suggestions to provide for the input.	W3CInputValue[] | string | undefined	undefined
_tabIndex	_tab-index	Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)	number | 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 input.	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

focus

focus() => Promise<void>

[DEPRECATED] Use kolFocus instead.

Returns

Type: Promise<void>

getValue() => Promise<string | undefined>

Returns

Type: Promise<string | undefined>

kolFocus() => Promise<void>

Returns

Type: Promise<void>

reset() => Promise<void>

Returns

Type: Promise<void>

Slots

Slot	Description
	Die Beschriftung des Eingabefeldes.

---

Live-Editor

Beispiele