Date Picker
The Date Picker offers a calendar interface for selecting dates in Salesforce, often used in scheduling, forms, and reports.
The Avonni Date Picker displays an interactive calendar that lets users select single dates, multiple dates, or a date range (interval) within a Screen Flow. It supports minimum/maximum date bounds, disabled dates, disabled intervals, marked dates with colored indicators, and optional week numbers.
Overview
The Date Picker offers a calendar interface for selecting dates in Salesforce, often used in scheduling, forms, and reports.
Configuration
To configure it, click the component on the Flow screen. The Edit Date Picker Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Selection Mode controls how many dates a user can choose:
Single — only one date at a time (default).
Multiple — users can select several individual dates.
Interval — users select a start and end date to define a range.
Orientation sets whether multiple month calendars are displayed Horizontally or Vertically (relevant when Number of Month Calendars is greater than 1).
Selected Dates pre-fills the calendar with one or more selected dates (set from a flow variable).
Disabled Dates marks specific dates as unselectable. Accepts an array of ISO 8601 date strings.
Disabled Intervals defines time ranges during which dates cannot be selected.
Date Labels assigns a text label (and optional styling) to specific calendar days — useful for marking holidays, deadlines, or special events.
Marked Dates visually highlights specific dates using a colored indicator (up to three markers per date).
Min sets the earliest selectable date. Dates before this value are not shown.
Max sets the latest selectable date. Dates after this value are not shown.
Number of Month Calendars controls how many months are displayed at once.
Display week number column adds a column showing ISO week numbers alongside the calendar days.
Hide Navigation hides the previous/next month navigation arrows and the header.
Disabled makes the entire calendar non-interactive.
Interactions
Interactions define what happens when users interact with the Date Picker. Configure them from the Interactions tab of the Edit Date Picker panel.
Change
Fires when the user selects or changes a date. Use this to store the selected date in a flow variable or drive conditional logic downstream.
Styling
The Style tab gives you fine-grained control over the Date Picker's appearance. Configure it from the Style tab of the Edit Date Picker panel.
Controls the outer spacing around the date picker, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the calendar content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Styles the color of the various text elements in the calendar.
Dates / Disabled Dates / Today / Weekdays / Month: Set the color of each date-related text element.
Selected Date / Focused Selected Date / Hovered Selected Date: Set the text color of selected dates in their default, focused, and hovered states.
Sets the background colors of the calendar and its dates.
Color / Linear Gradient: Set the overall background color or apply a gradient.
Date Picker / Today / Hovered Date: Set the background of the calendar area, today, and hovered dates.
Selected Date / Focused Selected Date / Hovered Selected Date: Set the background of selected dates in their default, focused, and hovered states.
Adjusts display when the date picker is opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Styles the border shown around dates when interval (range) selection mode is active.
Color: Set the border color.
Style: Choose a border style (e.g. solid, dashed, dotted).
Output Variables
The Date Picker exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Date Picker component, and pick the output variable you need.
Date Selection
Updated whenever the user selects or changes a date.
Value
Date
The first selected date as an ISO 8601 date string. Use this in single-selection mode, or when only the earliest selected date matters.
Value Collection
Date Collection
All selected dates as an array of ISO 8601 date strings. Use this in Multiple or Interval selection mode to capture the full set of chosen dates.
Example: In Interval mode, store Value Collection in a flow Date Collection variable, then pass the first and last elements to a downstream record-update to set a start date and end date on a record.
Flow Interaction Output Variables
Like all interactive Flow components, the Date Picker exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?