Skip to main content
Using date_range 
{% range_calendar id="date_filter" /%}

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
    date_range={
        date="date"
        range={{date_filter}}
    }
/%}

​
Examples

​
Using date_range

Using date_range 
{% range_calendar id="date_filter" /%}

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_grain="month"
    date_range={
        date="date"
        range={{date_filter}}
    }
/%}

​
Using where

Using where 
{% range_calendar id="date_filter" /%}

{% table
    data="demo_daily_orders"
    where="date {{date_filter.between}}"
/%}

​
Using Inline SQL

Using Inline SQL 
{% range_calendar id="date_filter" /%}

```sql filtered_orders
select * from demo_daily_orders
where date {{date_filter.between}}
```

{% table data="filtered_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.Allowed values:
  • last 7 days
  • last 30 days
  • last 3 months
  • last 6 months
  • last 12 months
  • week to date
  • month to date
  • quarter to date
  • year to date
  • previous week
  • previous month
  • previous quarter
  • previous year
  • all time
​
defaultRange
string
default:"all time"
(deprecated) Use default_range instead. Default range preset to select on load.Allowed values:
  • last 7 days
  • last 30 days
  • last 3 months
  • last 6 months
  • last 12 months
  • week to date
  • month to date
  • quarter to date
  • year to date
  • previous week
  • previous month
  • previous quarter
  • previous year
  • all time
​
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

​
Using the Filter Variable

Reference this filter using {{filter_id}}. The value returned depends on where you use it.
ContextDefault PropertyNo SelectionResult
Inline SQL query.betweenBETWEEN toDate('2024-01-01') AND toDate('2024-12-31')
where attribute.betweenBETWEEN toDate('2024-01-01') AND toDate('2024-12-31')
Text / Markdown.rangeLast 6 Months

​
Available Properties

You can also access specific properties using {{filter_id.property}}:

​
.start

Returns the start date as a date expression. 
{% range_calendar id="date_filter" /%}

```sql filtered_data
select * from events
where event_date >= {{date_filter.start}}
```
Example value: toDate('2024-01-01')

​
.end

Returns the end date as a date expression. 
{% range_calendar id="date_filter" /%}

```sql filtered_data
select * from events
where event_date <= {{date_filter.end}}
```
Example value: toDate('2024-12-31')

​
.between

Returns a BETWEEN clause for the date range. 
{% range_calendar id="date_filter" /%}

```sql filtered_data
select * from events
where date {{date_filter.between}}
```
Example value: BETWEEN toDate('2024-01-01') AND toDate('2024-12-31')

​
.range

Returns a human-readable description of the selected range. This is the value to use with date_range attribute. 
{% range_calendar id="date_filter" /%}

{% line_chart
    data="demo_daily_orders"
    x="date"
    y="sum(total_sales)"
    date_range={
        date="date"
        range={{date_filter}}
    }
/%}
Example value: Last 6 Months