time-input

Overview

time-input allows users to enter a time (bound to a datetime field) using a time picker.

Version compatibility

time-input was introduced in version 4.87.0 of the JourneyApps Runtime.

Basic Example

main.view.xml

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

<time-input label="Departure time" bind="departure_time" required="false" />

Standard Attributes

bind

bind

label

label

required

required

Advanced Attributes

align-content

align-content

align-label

align-label

clear-button-visibility

clear-button-visibility

clear-icon

Optional

Type: string

Default: "fa-times"

Specify the icon on the right side of the input that appears when a time was selected. Find a list of available icons here.

disabled

disabled

error-message

error-message

icon-position

icon-position

id

id

label-case

label-case

label-color

label-color

modifier-text

modifier-text

on-change

on-change

placeholder

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

Optional

Type: string

Default: "fa-clock"

Specify the icon on the right side of the input that appears before a time was selected. Find a list of available icons here.

Component Methods

The following component methods are available when an id is assigned to the component and component.timeInput({id:'my-id'}) is called from JS/TS:

clear

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

pickTime

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

scrollIntoView

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