datetime-input
Last updated
Last updated
datetime-input allows users to input a datetime value using a calendar and time picker.
bindlabelrequiredalign-contentalign-labelclear-button-visibilityclear-iconOptional
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-placeholderOptional
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.
disablederror-messageicon-positionidlabel-casemodifier-texton-changeplaceholder-dateDeprecated
placeholder-date is deprecated since version 4.87.0 of the JourneyApps Runtime.
Deprecated. See date-placeholder.
placeholder-timeDeprecated
placeholder-time is deprecated since version 4.87.0 of the JourneyApps Runtime.
Deprecated. See time-placeholder.
show-if and hide-iftime-formatOptional
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-iconOptional
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-placeholderOptional
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.
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:
clearProgrammatically clear the selected date and time bound to the datetime-input component.
pickDateProgrammatically open the date picker to allow the user to select or update a date value.
scrollIntoViewProgrammatically scroll until the datetime-input is visible in the view.
