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

main.view.xml

<var name="my_datetime" type="datetime" />

<datetime-input label="Please specify a date and time:" bind="my_datetime" required="false" />

Standard Attributes

bind

bind

label

label

required

required

Advanced Attributes

align-content

Version compatibility

align-content was introduced in version 4.87.0 of the JourneyApps Runtime.

align-content

align-label

Version compatibility

align-label was introduced in version 4.87.0 of the JourneyApps Runtime.

align-label

clear-button-visibility

clear-button-visibility

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

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

Version compatibility

error-message was introduced in version 4.87.0 of the JourneyApps Runtime.

error-message

icon-position

Version compatibility

icon-position was introduced in version 4.87.0 of the JourneyApps Runtime.

icon-position

id

Version compatibility

id was introduced in version 4.87.0 of the JourneyApps Runtime.

id

label-case

Version compatibility

label-case was introduced in version 4.87.0 of the JourneyApps Runtime.

label-case

modifier-text

modifier-text

on-change

on-change

placeholder-date

Deprecated

placeholder-date is deprecated since version 4.87.0 of the JourneyApps Runtime.

Deprecated. See date-placeholder.

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

hide-if

time-format

Optional

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-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

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

Programmatically clear the selected date and time bound to the datetime-input component.

pickDate

Programmatically open the date picker to allow the user to select or update a date value.

scrollIntoView

Programmatically scroll until the datetime-input is visible in the view.