Skip to main content

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

id
String
required
The id of the date range picker to be used in SQL query templates (e.g., {{date_filter.between}})
title
String
Text displayed above the date range picker
default_range
String
default:"all time"
Default range preset to select on load. If not specified, defaults to “all time” if available, otherwise uses the first preset in preset_ranges.
defaultRange
String
default:"all time"
(deprecated) Use default_range instead. Default range preset to select on load.
preset_ranges
Array
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.
width
Number
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’).
I