> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/date-time-picker.md). # Date Time Picker ## 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
How to Block Out Times/files/iUe9h9rbmuW4vm6Mt07n/pages/7VIpN0uE9o6gYxigFbJx
*** ## 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 **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. **Display Next Button** shows a **Next** button after the user selects a time slot (radio mode only). Use this as an alternative to auto-advancing via interaction. **Next Button Label** customizes the label on the Next button. **Label** sets the text label shown above the picker. **Field Level Help** adds a tooltip help text next to the label. **Required** makes a selection mandatory before the flow can proceed. **Read Only** displays the current value but prevents changes. **Disabled** makes the component visible but non-interactive. ### 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**](/flow/tutorials/components/date-time-picker/how-to-block-out-times.md). **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. *** ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) 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. {% tabs %} {% tab title="Margin" %} Controls outer spacing. * **Top:** Sets the top margin. * **Right:** Sets the right margin. * **Bottom:** Sets the bottom margin. * **Left:** Sets the left margin. {% endtab %} {% tab title="Padding" %} Controls inner spacing. * **Top:** Sets the top padding. * **Right:** Sets the right padding. * **Bottom:** Sets the bottom padding. * **Left:** Sets the left padding. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Border" %} 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. {% endtab %} {% tab title="Flow Dialog" %} 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. {% endtab %} {% tab title="Header" %} Styles the optional header area above the picker content. * **Background Color:** Sets the header background color. {% endtab %} {% tab title="Label" %} 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. {% endtab %} {% tab title="Button" %} 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. {% endtab %} {% tab title="Next Button" %} 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. {% endtab %} {% endtabs %} ## 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 | Output variable | Type | What it returns | | -------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/date-time-picker.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.