Date Range Picker

What it does
This component allows you to create a date range picker input that your users can use to filter data.
When the element is added to the dashboard, it looks like:
Configuration
Date range picker configuration
Basic Configuration
Configuration Option
Description
Label
This text is the label given to the dropdown select on the dashboard. The label is placed above the dropdown. This field can be empty.
Default Range
This allows you to set the selected range that the component will default to
Enable user dropdown
(Default: False) This enables the date range element to have a dropdown attached to it that allows your users to select pre-defined ranges rather than needing to use the date picker to select the range.
Enable clearing selection
Allows end-users to clear the date range and select all dates
Set end date to end of day
Set the end date in include all data through the end of the day. Disabling will select data through the current time on that specific end date.
Variable Usage
In the SQL dataset
To access the elements in the SQL editor, use the following syntax:
1
--to reference the first date
2
{{date_range_picker.startDate}}
3
​
4
--to reference the second date
5
{{date_range_picker.endDate}}
6
​
7
​
8
--example
9
WHERE 1=1 
10
[[AND date_field >= {{date_range_picker.startDate}}]]
11
[[AND date_field <= {{date_range_picker.endDate}}]]
Copied!
In the panel configuration
You can also link the data range picker directly to a specific chart or table by configuring the filter section in the component edit mode without writing any SQL
1.Select the component you wish to filter
2.Drag a time or date field into the filter section
3.Select the operator "is between", the variable option, and the correct date range picker
​

Date Picker

Container

Last modified 5mo ago

Copy link

Contents

What it does

Configuration

Basic Configuration

Variable Usage

In the SQL dataset

In the panel configuration

​