GuidesReferenceChangelogVideosDiscord
Reference
Sign UpLogin

Date Picker

organizing info

Use the Date Picker Web Control to collect a specific date from the user. 

Properties

General

Date Picker Layout

Determines how many days the Date Picker presents. Options are:

  • 1 Week
  • 2 Weeks
  • 1 Month

Calendar

Presents all TCPA calendars available per US state.

Date Range

Determines the date range from which the user can pick a date. Options are:

  • all - allows both dates in the past and the future to be selected
  • past - allows only dates in the past to be selected
  • future - allows only dates in the future to be selected

Minimum Days Out

Expects type number.

Determines the minimum number of displayed days from which a user can pick a date taking today's date as the starting point.

Maximum Days Out

Expects type number.

Determines the maximum number of displayed days from which a user can pick a date taking today's date as the starting point.

Days Out Mode

Expects type text.

Determines the behavior of the minimum/maximum days out.

  • allDays - all days are counted when setting minimum/maximum days out.
  • calendarDaysOnly - only available days reflected for the selected calendar are counted when setting minimum/maximum days out

For example, if a calendar is selected in the control property that does not have any availability slots on Saturdays and Sundays and the current day is Thursday, the following days will be available to select if the Minimum Days Out is 3.

  • allDays - Monday is the next available day
  • calendardaysOnly - Tuesday is the next available day

Time Zone

Expects type text.

Defines the time zone of the dates that can be selected depending on what properties are configured. By default, the control will use the time zone of the user's browser through session.timeZone. For a list of supported time zones, see Supported Time Zones.

Data Binding

Value

Expects type Date.

By default, this Data Binding property auto-generates a Variable of type Date at the Web Page level to store the data from the input.

Accessibility

Aria Label

Expects type text.

The aria-label attribute is used to define a string that labels the current element. It is used to provide an accessible name for the control. For more information see here.

State

Is Visible

Expects type boolean.

If TRUE the picker will be visible. If FALSE the date picker will not be displayed. If the field is empty, the date picker will be visible.

Is Disabled

Expects type boolean.

If TRUE the picker will be disabled and the user will not be able to interact with the control. If FALSE the control will be enabled. If the field is empty, the control will be enabled.

Style

The Date Picker is a compound Web Control. You can style each Control separetely. See Common Style Properties of Web Controls.

Actions

Value Changed

Triggers the set actions whenever the user selects a date in the picker.

Metadata about this event can be accessed through the event namespace.

Example

Add the Date Control to a Web Flow. Set the Date Picker Layout to two weeks and make sure the Date Range is set to Future.

organizing info