​
What it does

This component allows you to create a date picker input which your users can use to filter data. The data picker can be a single date, or a date range.

When the element is added to the dashboard, it looks like:

​
Single Date

​
Date Range

​
Configuration

​
Single Date

​
Single Date Basic Configuration

Configuration OptionDescription
Include Time SelectionToggle to allow users to select a time with the date
Selectable RangeDefine from which range users can select the single date value from. You can input exact dates (such as April 1 - April 20) or relative ranges (such as the last month).
Default ValueDefine the default value on dashboard loads.
LabelDefine the label of the component in the dashboard.
Enable clearing selectionAllow users to clear the input with an X mark.
Enable Dependency SelectionWhen enabled, you may create a dependency between this element and other elements on the dashboard. When this element is dependent on an element selected, it will be disabled until a value is selected by the user.

​
Date Range

​
Date Range Basic Configuration

Configuration OptionDescription
Selection UIAllow your users to select from a preset list of options (such as previous quarter), allow a custom range they define, or both.
Default ValueDefine the default value on dashboard loads.
LabelDefine the label of the component in the dashboard.
Enable clearing selectionAllow users to clear the input with an X mark.
Set end date to end of dayThis toggle allows you to select the end date in the range to refer to the end of the day, which is useful for SQL queries. Otherwise, it will refer to the beginning of the day.
Use portal for popoverThis toggle makes it so that the dropdown or multiselect components, when the dropdown portion is opened, won’t be cutoff when extending beyond a container or the embed frame.
Enable Dependency SelectionWhen enabled, you may create a dependency between this element and other elements on the dashboard. When this element is dependent on an element selected, it will be disabled until a value is selected by the user.

​
Customizable Date Range Presets

If the pre-defined date ranges are insufficient (e.g. Today, Yesterday, Last 7 Days, etc.), you can create custom date range presets. Date range presets appear in the dropdown alongside the pre-defined date ranges.

​
Usage

Configuration for Start Date / End Date:

  • Now - Today’s Date
  • Plus - Add to today’s date (for future dates)
  • Minus - Subtract from today’s date (for past dates)
  • StartOf - Sets the time to 00:00:00
  • EndOf - Sets the time to 23:59:59

A preview of the current date range is shown to help you understand the range you are creating.

Example of the Last 10 Days:

Example of previous week:

Example of last 12 completed months:

​
Variable Usage

To access the elements in the SQL editor, use the following syntax:

For users connected to a BigQuery warehouse, you will need to cast the data variable to the correct data type using the code below.

​
Single Date

Typical Usage
WHERE 1=1 [[AND date_field >= {{datepicker1}}]]
					[[AND date_field <= {{datepicker2}}]]
					[[AND DATE(date_field) = {{datepicker3}}]]
Casting to Date Type
WHERE 1=1 [[AND date_field >= DATE({{datepicker1}})]]
					[[AND date_field <= DATE({{datepicker2}})]]
					[[AND DATE(date_field) = DATE({{datepicker3}})]]
Casting to Timestamp Type
WHERE 1=1 [[AND date_time >= TIMESTAMP({{datepicker1}})]]
					[[AND date_time <= TIMESTAMP({{datepicker2}})]]
					[[AND TIMESTAMP(date_time) = TIMESTAMP({{datepicker3}})]]

​
Date Range

Date range pickers have two variables, startDate and endDate. All date ranges are updated when the dashboard is loaded or refreshed, filters are re-applied, or the date range is changed. These variables can be used in SQL queries like so:

--to reference the first date
{{date_range_picker.startDate}}

--to reference the second date
{{date_range_picker.endDate}}

--example
WHERE 1=1
[[AND date_field >= {{date_range_picker.startDate}}]]
[[AND date_field <= {{date_range_picker.endDate}}]]

​
Filtering

UI Elements can filter charts, see the overview page filtering section.

ToggleSwitch