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

pagebind

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

pagealign-content

align-label

pagealign-label

clear-button-visibility

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

pagedisabled

error-message

pageerror-message

icon-position

pageicon-position

id

pageid

label-case

pagelabel-case

label-color

pagelabel-color

modifier-text

pagemodifier-text

on-change

pageon-change

placeholder

pageplaceholder

show-if and hide-if

pageshow-ifpagehide-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.