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.
_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
idundnamekorrekt 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
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.
_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
idundnamekorrekt 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 | [DEPRECATED] Will be removed in v3. Use automatic behaviour instead. Defines whether the screen-readers should read out the notification. | boolean | undefined | undefined |
_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 | _msg | Defines the properties for a message rendered as Alert component. | string | 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 |
_shortKey | _short-key | Adds a visual short key hint to the component. | 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; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: "button" | "link" | "tab" | "treeitem" | 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; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | 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 | Date | undefined>
Returns
Type: Promise<string | Date | undefined>
kolFocus() => Promise<void>
Returns
Type: Promise<void>
reset() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |