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`	[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.

InputDate

Konstruktion

Code

Beispiel

Datum entfernen

Events

Verwendung

Best practices

Barrierefreiheit

Tastatursteuerung

Links und Referenzen

Properties

Methods

focus

Returns

`getValue() => Promise<string | Date | undefined>`

Returns

`kolFocus() => Promise<void>`

Returns

`reset() => Promise<void>`

Returns

Slots

View example

Live-Editor

Beispiele

Konstruktion​

Code​

Beispiel​

Datum entfernen​

Events​

Verwendung​

Best practices​

Barrierefreiheit​

Tastatursteuerung​

Links und Referenzen​

Properties​

Methods​

focus​

Returns​

getValue() => Promise<string | Date | undefined>​

Returns​

kolFocus() => Promise<void>​

Returns​

reset() => Promise<void>​

Returns​

Slots​

View example

Live-Editor​

Beispiele​

Konstruktion

Code

Beispiel

Datum entfernen

Events

Verwendung

Best practices

Barrierefreiheit

Tastatursteuerung

Links und Referenzen

Properties

Methods

focus

Returns

`getValue() => Promise<string | Date | undefined>`

Returns

`kolFocus() => Promise<void>`

Returns

`reset() => Promise<void>`

Returns

Slots

Live-Editor

Beispiele