InputDate

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

The input type Date creates an input field for date values. These can be specific dates, but also weeks, months or times.

Construction

Code

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

Events

For the handling of events or callbacks, see .

Event	trigger	Value
click	Input field is clicked	-
focus	Input field is focused	-
blur	Input field loses focus	-
input	Value is changed by entering	Current value of the input field
change	Entry has been completed	Current value of the input field

Example

Remove date

The following example shows a component in React that offers the option of removing the value in the date field using a button.

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

Component events can be handled via a _on property, which consists of an object with various callback functions:

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

Event	trigger	Value
onFocus	Element is focused	-
onClick	Element is clicked	-
onInput	Date is set or changes (corresponds to native input event)	Date entered as ISO8601 String
onChange	Date is set or changes (corresponds to native change event)	Date entered as ISO8601 String
onBlur	Element loses focus	-

Usage

The InputDate component can be used to capture data. It internally uses the InputNumber component.

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.

The component stands out because it supports numerous number-based input patterns. It is important to note that input behavior can vary from browser to browser and device to device. For example, it is possible to enter 01/01/999999 for the date, even if max=2022-02-02. The field value is still 2022-02-02.

Best practices

• Make sure to set id and name correctly so that the data is sent when you submit the form.

Accessibility

The icons in the component cannot be accessed using the Tab key. The component selection aids are opened using the space bar or Enter. For example, with the type date you get a calendar module that can be used to select the desired date using the mouse or keyboard. Alternatively, you can enter the values ​​manually.

Known issues

There are known accessibility limitations for the input date.

Keyboard controls

The input field for time information comes in different versions (date, time, etc.). The 'Tab' key sets the focus on the input field. The device-specific selection dialog can then be opened using the 'Space' key.

Note: We found in our tests that, depending on the browser version, it is sometimes possible to focus on the calendar icon and sometimes not. Without the implementation of the component having changed. We don't yet know why this is the case. Nevertheless, opening the selection dialog is always possible using the 'Space' key.

button	Function
Tab	Focuses the input field. After receiving focus, the 'Tab' key switches through the input areas. Only then does the 'Tab' key switch to the next input field.
Empty	If the input field is focused, a selection dialog can be opened or closed in the browser using the 'space' key. Navigation and selection is done here using the 'Tab' key, the 'arrow' keys and confirmation with the 'Enter' key.
Arrow keys (left/right)	When the input field is focused, you can use the 'arrow' keys to switch between the input areas.
Arrow keys (up/down)	If an input area is activated, the values ​​can be changed using the arrow keys up and down.
Esc	If a selection dialog is available, it can be closed alternatively using the 'Space' key or the 'Esc' key.

Links and references

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
_id	_id	[DEPRECATED] Will be removed in the next major version. 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 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" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _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; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "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; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | 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

getValue

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

Returns the current value.

Returns

Type: Promise<string | Date | null | undefined>

kolFocus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

reset() => Promise<void>

Resets the component's value.

Returns

Type: Promise<void>

Slots

Slot	Description
	Die Beschriftung des Eingabefeldes.

---

Usage _msg

Case	_msg-Value
No message	undefined
Default error message	string
Message	{_type: 'success', _description: 'Success message'}

View example

Live editor

Examples