Date

Defines that step will wait for the visitor to select and submit a date from the widget.
The component can be customized by selecting week start day from options: Sunday (selected by default) or Monday, and selecting date format from provided options (MM-DD-YYYY selected by default)
There are three options of date selection: Single date, Multiple dates, Range of dates.
Single and multiple

Range

Blocked dates

Allows to disable particular dates for selection.

• Future dates - disables all dates in future
• Past dates - disables all dates in past
• Custom dates (set via function) - allows to disable particular dates using function
• Custom dates (set via merge field) - allows to disable particular dates using merge field

TIP

In the range mode blocked dates wouldn't be excluded from the range.

Function

TIP

Return true to disable and false to enable date

// disable all wednesdays
return moment(date).day() === 3;

// disable 10s day of month
return moment(date).date() === 10;

// disable Novembers
return moment(date).month() === 10;

TIP

Full documentation about moment.js library you can find here (opens new window)

Merge field

Should contain single string or number or array of strings in timestamp date format in milliseconds, e.g. 1678183013891 (in seconds are also working, but just for backward compatibility).

// string
"1674035350"

// array of strings
[
  "1674035350"
]

Suggested dates

Allows to highlight particular dates. The same logic as for blocked dates except future dates and past dates options.

Output

The date chosen by the user is added to the output both in selected format and written out.

The structure of the output is:

{
  date: "26-05-2020",
  dateISO: "2020-05-26T00:00:00Z",
  dateText: "26 May 2020",
  dateUnixMs: 1616112000000
}

Open calendar on a specific date

Allows to set initial date for calendar. Note: this is not a default value, this is date on which calendar will be opened for the user. Initial date can be set by function. For instance to open calendar on the next month we can use:

return dayjs().add(1, 'month')

Use function to define user answer

Allows to override default answer by custom message.

Available variables

The same as output example.

{
  date: "26-05-2020",
  dateISO: "2020-05-26T00:00:00Z",
  dateText: "26 May 2020",
  dateUnixMs: 1616112000000
}

Example

return `date: ${date} | dateText: ${dateText} | dateISO: ${dateISO} | dateUnixMs: ${dateUnixMs}`

Step configuration:

Result: