date-input

Overview

date-input allows users to select a date from a calendar.

Version compatibility

date-input was introduced in version 4.72.1 of the JourneyApps Runtime.

Basic Example

main.view.xml

<var name="delivery_date" type="date"/>

<date-input label="Delivery date" bind="delivery_date" 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

disabled

disabled

error-message

error-message

id

id

icon-position

Version compatibility

icon-position was introduced in version 4.86.1 of the JourneyApps Runtime.

icon-position

label-case

Version compatibility

label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

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

Component Methods

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

clear

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

pickDate

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

scrollIntoView

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