Controls
Date
Controls
Date
Date pickers allows your customers to filter the dashboard to a specific slice of data in time.
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 Option | Description |
|---|---|
| Include Time Selection | Toggle to allow users to select a time with the date |
| Selectable Range | Define 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 Value | Define the default value on dashboard loads. |
| Label | Define the label of the component in the dashboard. |
| Enable clearing selection | Allow users to clear the input with an X mark. |
| Enable Dependency Selection | When 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 Option | Description |
|---|---|
| Selection UI | Allow your users to select from a preset list of options (such as previous quarter), allow a custom range they define, or both. |
| Default Value | Define the default value on dashboard loads. |
| Label | Define the label of the component in the dashboard. |
| Enable clearing selection | Allow users to clear the input with an X mark. |
| Set end date to end of day | This 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 popover | This 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 Selection | When 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. |
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
--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
You can now filter directly your charts in the UI elements themselves. For more information on this process, see the filtering section of the overview page.