datetime-input
Last updated
Last updated
datetime-input allows users to input a datetime value using a calendar and time picker.
Version compatibility
datetime-input is supported in all versions of the JourneyApps Container and Runtime.
It received several functional updates in version 4.87.0 of the JourneyApps Runtime, most notably the addition of advanced styling and configuration capabilities.
bindlabelrequiredalign-contentVersion compatibility
align-content was introduced in version 4.87.0 of the JourneyApps Runtime.
align-labelVersion compatibility
align-label was introduced in version 4.87.0 of the JourneyApps Runtime.
clear-button-visibilityclear-iconVersion compatibility
clear-icon was introduced in version 4.87.0 of the JourneyApps Runtime.
Optional
Type: string
Default: "fa-times"
Specify the icon on the right side of the input that appears when a date or time was selected. Find a list of available icons here.
date-placeholderOptional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: "Select date"
Override the default placeholder text for the date input field.
Note: once the user entered a date the placeholder is no longer visible.
disablederror-messageVersion compatibility
error-message was introduced in version 4.87.0 of the JourneyApps Runtime.
icon-positionVersion compatibility
icon-position was introduced in version 4.87.0 of the JourneyApps Runtime.
idVersion compatibility
id was introduced in version 4.87.0 of the JourneyApps Runtime.
label-caseVersion compatibility
label-case was introduced in version 4.87.0 of the JourneyApps Runtime.
modifier-texton-changeplaceholder-dateDeprecated
placeholder-date is deprecated since version 4.87.0 of the JourneyApps Runtime.
Deprecated. See date-placeholder.
placeholder-timeDeprecated
placeholder-time is deprecated since version 4.87.0 of the JourneyApps Runtime.
Deprecated. See time-placeholder.
show-if and hide-iftime-formatOptional
Type: 12h | 24h
Default: 12h
Specify the clock format when users enter a time. Example:
12h format: 3:32 PM
24h format: 15:32
time-iconVersion compatibility
time-icon was introduced in version 4.87.0 of the JourneyApps Runtime.
Optional
Type: string
Default: "fa-clock"
Specify the icon on the right side of the time input that appears before a time was selected. Find a list of available icons here.
time-placeholderOptional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: "Select time"
Override the default placeholder text for the date input field.
Note: once the user entered a time the placeholder is no longer visible.
The following component methods are available when an id is assigned to the component and component.datetimeInput({id:'my-id'}) is called from JS/TS:
clearProgrammatically clear the selected date and time bound to the datetime-input component.
pickDateProgrammatically open the date picker to allow the user to select or update a date value.
scrollIntoViewProgrammatically scroll until the datetime-input is visible in the view.
