Date Picker

What it does
This component allows you to create a date picker input which your users can use to filter data.
When the element is added to the dashboard, it looks like:
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.
Allow Time Selection
(default: True) If selected, the user will be able to select a time in addition to a date. The variable used in your queries will also provide a time.
Enable clearing selection
This toggle controls whether or not the user can click the "x" button to clear the selected option. 
​
By default, this feature is enabled, meaning that users can clear out the selected option in a dropdown.
​
Disabled clearing selections in order to ensure that the dropdown will always have a value.
Default Value Configuration
There are two ways to define a default value for the date. Either as an exact date or as a relative date. The default value selected with be set when the dashboard loads.
Selectable Range Configuration
The selectable range is the range of values that you will allow your users to select. This is useful if you don't want your users to select data before a certain time or want to limit their queries to the current month/year/etc.
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.
1
--typical usage
2
WHERE 1=1 [[AND date_field >= {{datepicker1}}]]
3
					[[AND date_field <= {{datepicker2}}]]
4
					[[AND DATE(date_field) = {{datepicker3}}]]
5
​
6
--for casting to date type
7
WHERE 1=1 [[AND date_field >= DATE({{datepicker1}})]]
8
					[[AND date_field <= DATE({{datepicker2}})]]
9
					[[AND DATE(date_field) = DATE({{datepicker3}})]]
10
​
11
--for casting to timestamp type
12
WHERE 1=1 [[AND date_time >= TIMESTAMP({{datepicker1}})]]
13
					[[AND date_time <= TIMESTAMP({{datepicker2}})]]
14
					[[AND TIMESTAMP(date_time) = TIMESTAMP({{datepicker3}})]]
Copied!

Multi-select

Date Range Picker

Last modified 11mo ago

Copy link

Contents

What it does

Configuration

Basic Configuration

Default Value Configuration

Selectable Range Configuration

Variable Usage