@public-ui/components

# 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 ```html <kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date> ``` ### Beispiel <kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date> #### Datum entfernen Folgendes Beispiel zeigt eine Component in React, die die Möglichkeit bietet über einen Button den Wert im Datumsfeld zu entfernen. ```jsx 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: ```js 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. <kol-alert _type="info">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.</kol-alert> 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 - <kol-link _href="https://www.w3.org/TR/2012/WD-html-markup-20120329/input.date.html" _target="_blank"></kol-link> - <kol-link _href="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/" _target="_blank"></kol-link> - <kol-link _href="https://a11ysupport.io/tech/html/input(type-date)_element" _target="_blank"></kol-link> - <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>  ## 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?: "error"` \| `"default"` \| `"info"` \| `"success"` \| `"warning"` \| `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() => 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. | ----------------------------------------------