> 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/dynamic-components/components/date-range.md). # Date Range The Avonni Date Range component lets users select a start and end date — or start and end date/time — to define a specific period. Use it to filter records, set report parameters, schedule events, or capture any scenario that requires a defined time window. ## Overview This component presents two input fields: one for the start of the desired range and one for the end. Key features include: * **Date and Date/Time Selection:** Supports selection of full dates or specific date and time values. * **Predefined Range Options:** An optional combobox lets users jump to common periods (Today, This Week, Last Month, etc.) without manually picking dates. * **Customizable Formatting:** Control the display style of dates and times. * **Customizable Input Labels:** Tailor the labels for the start and end input fields. ### Use Cases * Filtering Data Tables, Lists, or Charts to show records within a selected period (e.g., "Opportunities Closed This Quarter," "Cases Created Last Week"). * Setting date parameters for generating reports. * Defining start and end times for scheduling events or tasks. * Logging periods for activities or projects. * Setting validity periods for promotions or offers. ## Configuration To configure the Date Range, select it on the canvas. The **Edit Date Range Picker** panel opens on the right. The sections below mirror the configuration panel from top to bottom. ### Properties #### Label Text label displayed above the date range inputs. #### Field Level Help Help text detailing the purpose and function of the input. #### Type Controls what kind of values the component captures. Choose **Date** (default) to capture calendar dates only, or **Datetime** to capture dates with times. #### Start Date / End Date The initial start and end date values. Visible only when **Type** is **Date**. Bind each to a Date variable to capture user selections. #### Start Date Time / End Date Time The initial start and end date/time values. Visible only when **Type** is **Datetime**. Bind each to a Date/Time variable to capture user selections. #### Variant Controls label positioning. **Standard** (default) places the label above the inputs. **Label Hidden** hides the label. #### Show Range Options When enabled, a combobox of predefined date ranges appears above the date inputs, letting users quickly select common periods without manually picking dates. #### Range Option Value The currently selected predefined range. Requires: **Show Range Options** = enabled. Available options: Custom (default), Today, Yesterday, This week, Last week, This month, Month-to-date, Last month, This quarter, Quarter-to-date, Last quarter, This year, Year-to-date, Last year. If a preset other than Custom is selected and no dates are defined, the date inputs are initialized to that range automatically. #### Is Expanded When enabled, the calendar picker opens automatically on render rather than waiting for the user to click an input. #### Required When enabled, the user must fill in both start and end values before the form can be submitted. #### Week Start Day The first day of the week shown in the calendar. Defaults to the user's locale. Options: Default, Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday. #### Disabled When enabled, the component is fully disabled and users cannot interact with it. #### Read Only When enabled, the selected values are displayed but cannot be edited by users. ### Format Controls how dates and times are rendered inside the inputs. #### Date Style Sets the date display format. **Short** renders a numeric date (e.g., 5/29/2025), **Medium** (default) renders an abbreviated month (e.g., May 29, 2025), and **Long** renders the full weekday and month (e.g., Thursday, May 29, 2025). #### Time Style Sets the time display format. Only visible when **Type** is **Datetime**. **Short** renders hours and minutes (e.g., 9:43 AM), **Medium** (default) adds seconds (e.g., 9:43:00 AM), and **Long** adds the timezone (e.g., 9:43:00 AM EDT). ### Date/Time Labels Overrides the default text labels on each individual date and time input field. #### Start Date Custom label for the start date input. Defaults to the component's built-in label when left blank. #### End Date Custom label for the end date input. #### Start Time Custom label for the start time input. Requires: **Type** = **Datetime**. #### End Time Custom label for the end time input. Requires: **Type** = **Datetime**. ### Range Options Labels Overrides the display text for each option in the predefined range combobox. Only visible when **Show Range Options** is enabled. Each field corresponds to one combobox option: Custom, Today, Yesterday, This week, Last week, This month, Month-to-date, Last month, This quarter, Quarter-to-date, Last quarter, This year, Year-to-date, and Last year. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Use Cases ### Filtering a Data Table by Opportunity Close Date Follow these steps to filter Opportunities by close date: {% stepper %} {% step %} #### **Add Date Range Component** * API Name: OpportunityDateFilter * Label: "Filter Opportunities by Close Date:" * Type: date
{% endstep %} {% step %} #### **Add Data Table Component** Follow these steps to integrate a Data Table below the Date Range component, displaying filtered Opportunities based on the selected dates. * **Drag the Component:** From the Component Library (left panel), drag the "Data Table" onto the canvas and position it below the Date Range component. * **Create a Query:** In the Data Table's Properties Panel, set up an Avonni Query Data Source to fetch Opportunity records (e.g., select "Opportunity" as the object). * **Add Query Filters:** Configure filters on the query to use the dates from the Date Range: * Filter 1: CloseDate >= {!DateRange1.startDate} * Filter 2: CloseDate <= {!DateRange1.endDate} * *Tip:* Use AND logic to ensure both filters apply only when dates are set.
* **Add Columns:** In the Columns section of the Properties Panel, select and add fields from the Opportunity query (e.g., Name, Amount, Stage, Close Date) to display in the table. *Result:* The Data Table will show Opportunities filtered by the user's date selections, updating dynamically on changes {% endstep %} {% step %} #### Set Data Table visibility rule To prevent displaying the Data Table with query errors (e.g., when filters are incomplete due to missing start or end dates), configure a [visibility rule](/dynamic-components/core-concepts/component-visibility.md). This ensures the table only appears once both dates are selected in the Date Range component.
{% endstep %} {% endstepper %} **Result:** User selections update variables, refreshing the table to show filtered Opportunities. **Result:** When the user selects a new start or end date in the Date Range component, the values will trigger the Data Table's query to re-filter and display only Opportunities within the selected close date range. ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Date Range Picker. Configure them from the **Interactions** tab of the Edit Date Range Picker panel. ### Change Fires when the user selects or modifies a start and end date (or date/time). Use this to refresh a connected data table, update flow variables, or trigger any downstream logic tied to the selected range. ## Key Considerations * **Type Matching:** Ensure the **Type** setting (Date or Datetime) matches the data type of the variables you bind to the value properties. * **Time Zones:** When using Datetime, be mindful of how Salesforce handles time zones. The selected values will typically be in the user's local time zone. * **Clear Labels:** Use the main **Label** and the custom Date/Time Labels effectively to guide users. The Avonni Date Range component offers a user-friendly way to select date or date/time periods. By binding its start and end value properties to variables, you can easily use the range chosen to filter data, trigger actions, or control other dynamic aspects of your Salesforce UI. --- # 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/dynamic-components/components/date-range.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.