Range Calendar

Display a date range picker for use in SQL query templates

{% 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

{% 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

{% range_calendar id="date_filter" /%}

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

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
• previous week
• previous month
• previous quarter
• previous year
• this week
• this month
• this quarter
• this year
• next week
• next month
• next quarter
• next year
• week to date
• month to date
• quarter to date
• year to date
• 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
• previous week
• previous month
• previous quarter
• previous year
• this week
• this month
• this quarter
• this year
• next week
• next month
• next quarter
• next year
• week to date
• month to date
• quarter to date
• year to date
• all time

preset_ranges · array

Array of date range keys to show in the preset list. If not provided, the default preset set is used. Forward-looking this ... and next ... presets are not shown by default and must be explicitly included here. 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.

Context	Default Property	No Selection	Result
Inline SQL query	.between		BETWEEN toDate('2024-01-01') AND toDate('2024-12-31')
where attribute	.between		BETWEEN toDate('2024-01-01') AND toDate('2024-12-31')
Text / Markdown	.range		Last 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