Example
{% range_calendar
id="date_filter"
/%}
```sql ranged_query
select *
from demo_daily_orders
[[where date {{date_filter.between}}]]
```
{% big_value
data="ranged_query"
value="sum(total_sales)"
/%}
Custom Preset List
{% range_calendar
id="date_filter"
title="Sales Period"
preset_ranges=["last 7 days", "last 30 days", "month to date", "quarter to date", "all time"]
default_range="month to date"
/%}
```sql filtered_sales
select *
from demo_daily_orders
[[where date {{date_filter.between}}]]
```
{% big_value
data="filtered_sales"
value="sum(total_sales)"
/%}
Smart Default Selection
{% range_calendar
id="recent_filter"
title="Recent Activity"
preset_ranges=["last 7 days", "last 30 days", "month to date"]
/%}
<!-- Since "all time" is not in preset_ranges and no default is specified,
this will automatically default to "last 7 days" (the first preset) -->
```sql recent_orders
select *
from demo_daily_orders
[[where date {{recent_filter.between}}]]
```
{% big_value
data="recent_orders"
value="count(*)"
title="Recent Orders"
/%}
Attributes
The id of the date range picker to be used in SQL query templates (e.g., {{date_filter.between}}
)
Text displayed above the date range picker
Default range preset to select on load. If not specified, defaults to “all time” if available, otherwise uses the first preset in preset_ranges.
(deprecated) Use default_range instead. Default range preset to select on load.
Array of date range keys to show in the preset list. If not provided, all presets are shown. When “all time” is excluded and no default is specified, the first preset in this list becomes the default.
Set the width of this component (in percent) relative to the page width
Available Filter Properties
When you reference a range calendar filter in inline queries using the {{filter_id.property}}
syntax, the following properties are available:
.start
Returns the start date as a date expression (e.g., toDate(‘2024-01-01’)).
.end
Returns the end date as a date expression (e.g., toDate(‘2024-12-31’)).
.between
Returns a BETWEEN clause for the date range (e.g., BETWEEN toDate(‘2024-01-01’) AND toDate(‘2024-12-31’)).
.range
Returns a human-readable description of the selected range (e.g., ‘Last 6 Months’ or ‘2024-01-01 to 2024-12-31’).