Date Time Picker
The Date Time Picker offers a visual interface for selecting dates and times, with options for day, week, and month views, and support for recurring appointments.
Overview
The Avonni Date Time Picker lets users select available time slots in a Screen Flow. It supports single-selection (radio) or multi-selection (checkbox) modes, five display variants (daily, weekly, monthly, timeline, inline), configurable time slot durations, availability constraints, disabled intervals, and optional date/time format customization.
Tutorials
Configuration
To configure it, click the component on the Flow screen. The Edit Date Time Picker Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label sets the text label shown above the picker.
Type sets the selection mode. Radio (single-select) lets the user pick one slot; Checkbox (multi-select) lets the user pick several.
Selected Date Times pre-fills the picker with one or more selected datetime values (from a flow variable).
Variant controls how time slots are presented:
Daily — groups available slots by day. Ideal for showing a schedule within a specific day.
Weekly — shows slots across an entire week.
Monthly — shows slots across the full month, highlighting days with availability.
Inline — embeds the picker directly on the screen rather than in a popup or dialog.
Timeline — visualizes slots along a horizontal timeline.
Date Picker Variant sets whether the date picker used to navigate dates appears as an Input (field with popover) or Inline (always visible).
Time Slot Duration defines the length of each available time slot as an ISO 8601 time string (e.g., 00:30 for 30 minutes).
Default Visible Date sets the date the picker opens to on first load.
Field Level Help adds a tooltip help text next to the label.
Required makes a selection mandatory before the flow can proceed.
Disabled makes the component visible but non-interactive.
Display Next Button shows a Next button after the user selects a time slot. Requires Type = Radio. Use this as an alternative to auto-advancing via interaction.
Next Button Label customizes the label on the Next button.
Visible Dates and Times
Control which dates and times are available for selection.
Start Date and End Date set the date range the picker can display.
Start Time and End Time define the earliest and latest times of day shown.
Available Date Times lists specific datetimes that are selectable (ISO 8601 strings). When set, only these slots can be chosen.
Available Intervals defines recurring blocks of time that are selectable (e.g., every weekday 9:00–17:00).
Disabled Date Times marks specific datetimes as unavailable — useful for blocking holidays or fully booked slots. View tutorial.
Disabled Intervals defines recurring blocks of time that are unavailable.
Show Disabled Dates controls whether disabled dates are shown (greyed out) or hidden entirely.
Date Format
Customize how dates are displayed in the picker:
Date Format Year — Numeric or 2-Digit.
Date Format Month — Numeric, 2-Digit, Long, Narrow, or Short.
Date Format Weekday — Long, Narrow, or Short.
Date Format Day — Numeric or 2-Digit.
Time Format
Customize how times are displayed:
Time Format Hour — Numeric or 2-Digit.
Time Format Minute — Numeric or 2-Digit.
Time Format Second — Numeric or 2-Digit.
12-Hour Clock — toggles between 12-hour and 24-hour time display.
Advanced Options
Show End Time displays the slot's end time alongside its start time.
Show Time Zone lets the user see and change the active time zone.
Hide Navigation removes the next/previous/today navigation controls.
Hide Date Picker hides the date navigation input entirely (useful when the date range is fixed).
Hide Label removes the label from the picker.
Week Start Day sets the day shown as the first day of the week. Defaults to the user's locale.
Read Only displays the current value but prevents changes.
Interactions
Interactions define what happens when users interact with the Date Time Picker. Configure them from the Interactions tab of the Edit Date Time Picker panel.
Change
Fires when the user selects or deselects a time slot. Use this to store the selected value, run validation, or drive conditional logic downstream.
Next Button Click
Fires when the user clicks the Next button. Requires Display Next Button to be enabled in the Properties tab.
Styling
The Style tab gives you fine-grained control over the Date Time Picker's appearance. Configure it from the Style tab of the Edit Date Time Picker panel.
Controls outer spacing.
Top: Sets the top margin.
Right: Sets the right margin.
Bottom: Sets the bottom margin.
Left: Sets the left margin.
Controls inner spacing.
Top: Sets the top padding.
Right: Sets the right padding.
Bottom: Sets the bottom padding.
Left: Sets the left padding.
Controls dimensions.
Width: Sets the component width.
Height: Sets the component height.
Min Width: Sets the minimum width.
Max Width: Sets the maximum width.
Min Height: Sets the minimum height.
Max Height: Sets the maximum height.
Overflow: Controls how content is clipped or scrolled when it overflows.
Customizes the border.
Color: Sets the border color.
Size: Sets the border thickness.
Style: Sets the border style (solid, dashed, dotted, etc.).
Radius: Sets the border corner radius.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Sets the dialog width.
Height: Sets the dialog height.
Background Color: Sets the dialog background color.
Styles the optional header area above the picker content.
Background Color: Sets the header background color.
Styles the label displayed above the picker.
Color: Sets the label text color.
Font Size: Sets the label font size.
Font Style: Sets the label font style (normal, italic, etc.).
Font Weight: Sets the label font weight (normal, bold, etc.).
Horizontal Alignment: Sets the horizontal alignment of the label.
Styles the time slot selection buttons.
Background Color: Sets the default button background color.
Background Color Disabled: Sets the background color for disabled buttons.
Background Color Selected: Sets the background color for selected buttons.
Text Color: Sets the default button text color.
Text Color Disabled: Sets the text color for disabled buttons.
Text Color Selected: Sets the text color for selected buttons.
Border Color: Sets the default button border color.
Border Color Selected: Sets the border color for selected buttons.
Border Size: Sets the default button border thickness.
Border Size Selected: Sets the border thickness for selected buttons.
Border Style: Sets the default button border style.
Border Style Selected: Sets the border style for selected buttons.
Border Radius: Sets the button corner radius.
Styles the Next button shown after a time slot is selected.
Background Color: Sets the default background color.
Background Color Active: Sets the background color when active.
Background Color Hover: Sets the background color on hover.
Text Color: Sets the default text color.
Text Color Active: Sets the text color when active.
Text Color Hover: Sets the text color on hover.
Border Color: Sets the default border color.
Border Color Active: Sets the border color when active.
Border Color Hover: Sets the border color on hover.
Border Radius: Sets the corner radius.
Border Size: Sets the border thickness.
Output Variables
The Date Time 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 Time Picker component, and pick the output variable you need.
Date/Time Selection
Value Collection
Date/Time Collection
All selected date/time slots as a collection of datetime values. In radio (single-select) mode this contains one entry; in checkbox (multi-select) mode it contains all selected slots.
Example: After a booking screen, store Value Collection in a flow variable and pass it to an Apex action that creates calendar events for each selected slot.
Flow Interaction Output Variables
Like all interactive Flow components, the Date Time 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?