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

pagebind

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

pagealign-content

align-label

pagealign-label

clear-button-visibility

pageclear-button-visibility

disabled

pagedisabled

error-message

pageerror-message

id

pageid

icon-position

Version compatibility

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

pageicon-position

label-case

Version compatibility

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

pagelabel-case

label-color

pagelabel-color

modifier-text

pagemodifier-text

on-change

pageon-change

placeholder

pageplaceholder

show-if and hide-if

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