What's NewDeveloper CommunitySupportStatus
Search
⌃K
Links

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

label

required

Advanced Attributes

align-content

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

align-label

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

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

error-message

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

icon-position

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

id

Version compatibility
id was introduced in version 4.87.0 of the JourneyApps Runtime.

label-case

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

modifier-text

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

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.
Previous
date-input
Next
dialog
Last modified 1mo ago