datetime-input
Overview
datetime-input
allows users to input a datetime
value using a calendar and time picker.
Basic Example
<var name="my_datetime" type="datetime" />
<datetime-input label="Please specify a date and time:" bind="my_datetime" required="false" />

Standard Attributes
bind
bindbind
label
labellabel
required
requiredrequired
Advanced Attributes
align-content
align-contentalign-content
align-label
align-labelalign-label
clear-button-visibility
clear-button-visibilityclear-button-visibility
clear-icon
clear-icon
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
disableddisabled
error-message
error-messageerror-message
icon-position
icon-positionicon-position
id
idid
label-case
label-caselabel-case
modifier-text
modifier-textmodifier-text
on-change
on-changeon-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-ifhide-ifshow-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
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