What's NewDeveloper CommunitySupportStatus
Ask or search…
⌃K
Links
Comment on page

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

label

required

Advanced Attributes

align-content

align-label

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

error-message

icon-position

id

label-case

label-color

modifier-text

on-change

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

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.
Previous
text-input
Next
toggle
Last modified 3mo ago