DateRangePicker (ALPHA)

BusinessEnterprise

Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The DateRangePicker widget lets users pick a start date and an end date from one calendar. Use it for date windows, for example a hotel stay, a leave request, or a report period. It picks dates only, without a time. To pick a single date, use the DatePicker widget.

DateRangePicker widget

Widget type: WDS_DATE_RANGE_PICKER_WIDGET

Content properties

These properties appear in the Content tab of the property pane.

Data

Date format string

Sets the format of formattedStartDate and formattedEndDate. Pick a format from the list, or switch to JS to enter a moment.js format string. Default: YYYY-MM-DD.

The list offers these formats: ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ), LLL, LL, YYYY-MM-DD HH:mm, YYYY-MM-DDTHH:mm:ss, YYYY-MM-DD hh:mm:ss A, DD/MM/YYYY HH:mm, D MMMM, YYYY, H:mm A D MMMM, YYYY, YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MM/DD/YYYY, DD/MM/YYYY, DD/MM/YY, and MM/DD/YY.

Default Start Date string

Sets the start date shown when the widget loads. Pick a date, or switch to JS to bind an ISO date string. If you change this value, the widget's range updates to match. The widget shows a range only when both the start and end dates are set. Default: empty.

Default End Date string

Sets the end date shown when the widget loads. Pick a date, or switch to JS to bind an ISO date string. If you change this value, the widget's range updates to match. Default: empty.

Placeholder Date string

Sets the date the empty start and end fields start from before the user picks a range. Default: empty.

First day of week string

Sets the first day of the week in the calendar. Options: Sunday to Saturday. When you bind it, use one of sun, mon, tue, wed, thu, fri, or sat. Default: Sunday.

Label

Text string

Sets the label shown above the date inputs. Default: Label.

Validations

Required boolean

Makes picking a range mandatory. When on and no range is set, the widget is invalid and shows the message "Please select a valid date range" after the user interacts with it. Default: off.

The widget is also invalid when only one end of the range is set, or when the end date is before the start date.

Minimum Date string

Sets the earliest date users can pick. The check includes the day itself. A start date before this day makes the widget invalid.

Maximum Date string

Sets the latest date users can pick. The check includes the day itself. An end date after this day makes the widget invalid.

General

Tooltip string

Shows help text or details next to the label.

Visible boolean

Controls whether the widget is visible when the app runs. Default: on.

Disabled boolean

Stops users from changing the range. Default: off.

Read only boolean

Stops users from editing the dates, but they can still select the text to copy it. Default: off.

Animate loading boolean

Shows a loading animation while the widget's data loads. Default: on.

Reference properties

Reference properties let you read the widget's state in bindings and code, for example {{DateRangePicker1.isVisible}}. You cannot set them directly.

isVisible boolean

Shows whether the widget is visible.

Example:

{{DateRangePicker1.isVisible}}

selectedStartDate string

Holds the start date as an ISO 8601 string. It is an empty string when no start date is set.

Example:

{{DateRangePicker1.selectedStartDate}}

selectedEndDate string

Holds the end date as an ISO 8601 string. It is an empty string when no end date is set.

Example:

{{DateRangePicker1.selectedEndDate}}

formattedStartDate string

Holds the start date in the format set in Date format. It is an empty string when no start date is set.

Example:

{{DateRangePicker1.formattedStartDate}}

formattedEndDate string

Holds the end date in the format set in Date format. It is an empty string when no end date is set.

Example:

{{DateRangePicker1.formattedEndDate}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{DateRangePicker1.isDisabled}}

Methods

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise

Shows or hides the widget.

Example:

DateRangePicker1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns the disabled state on or off.

Example:

DateRangePicker1.setDisabled(false)

Events

onDateRangeSelected

Runs when the user has picked both the start and the end date.

onFocus

Runs when the date inputs get focus.

onBlur

Runs when the date inputs lose focus.