datetime-input
Overview
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.
Basic Example
Standard Attributes
bind
bind
label
label
required
required
Advanced Attributes
align-content
align-content
Version compatibility
align-content
was introduced in version 4.87.0 of the JourneyApps Runtime.
align-label
align-label
Version compatibility
align-label
was introduced in version 4.87.0 of the JourneyApps Runtime.
clear-button-visibility
clear-button-visibility
clear-icon
clear-icon
Version 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-placeholder
date-placeholder
Optional
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.
disabled
disabled
error-message
error-message
Version compatibility
error-message
was introduced in version 4.87.0 of the JourneyApps Runtime.
icon-position
icon-position
Version compatibility
icon-position
was introduced in version 4.87.0 of the JourneyApps Runtime.
id
id
Version compatibility
id
was introduced in version 4.87.0 of the JourneyApps Runtime.
label-case
label-case
Version compatibility
label-case
was introduced in version 4.87.0 of the JourneyApps Runtime.
modifier-text
modifier-text
on-change
on-change
placeholder-date
placeholder-date
Deprecated
placeholder-date
is deprecated since version 4.87.0 of the JourneyApps Runtime.
Deprecated. See date-placeholder
.
placeholder-time
placeholder-time
Deprecated
placeholder-time
is deprecated since version 4.87.0 of the JourneyApps Runtime.
Deprecated. See time-placeholder
.
show-if
and hide-if
show-if
and hide-if
time-format
time-format
Optional
Type: 12h
| 24h
Default: 12h
Specify the clock format when users enter a time. Example:
12h
format: 3:32 PM24h
format: 15:32
time-icon
time-icon
Version 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-placeholder
time-placeholder
Optional
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.
Component Methods
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:
clear
clear
Programmatically clear the selected date and time bound to the datetime-input
component.
pickDate
pickDate
Programmatically open the date picker to allow the user to select or update a date value.
scrollIntoView
scrollIntoView
Programmatically scroll until the datetime-input
is visible in the view.
Last updated