Date Range
Creates a date picker that can be used to filter a query.
To see how to filter a query using an input component, see Filters.
From 2019-01-02 to 2021-12-31
<DateRange
name=date_range_name
data={orders_by_day}
dates=day
/>
From {inputs.date_range_name.start} to {inputs.date_range_name.end}Examples
Using Date Range from a Query
From 2019-01-02 to 2021-12-31
<DateRange
name=date_range_from_query
data={orders_by_day}
dates=day
/>
From {inputs.date_range_from_query.start} to {inputs.date_range_from_query.end}Manually Specifying a Range
<DateRange
name=manual_date_range
start=2019-01-01
end=2019-12-31
/>With a Title
Select a Date Range
<DateRange
name=date_range_with_title
data={orders_by_day}
dates=day
title="Select a Date Range"
/>Visible During Print / Export
<DateRange
name=date_range_visible_during_print
data={orders_by_day}
dates=day
hideDuringPrint={false}
/>Filtering a Query
Loading...
<DateRange
name=range_filtering_a_query
data={orders_by_day}
dates=day
/>
```sql filtered_query
select
*
from ${orders_by_day}
where day between '${inputs.range_filtering_a_query.start}' and '${inputs.range_filtering_a_query.end}'
```
<LineChart
data={filtered_query}
x=day
y=sales
/>Customizing Single Preset Ranges
<DateRange
name=name_of_date_range
presetRanges={'Last 7 Days'}
/>Customizing Multiple Preset Ranges
<DateRange
name=name_of_date_range
presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']}
/>Default Value for Preset Ranges
<DateRange
name=name_of_date_range
defaultValue={'Last 7 Days'}
/>Options
Required
Name of the DateRange, used to reference the selected values elsewhere as {inputs.name.start or inputs.name.end
- Options:
- string
Query name, wrapped in curly braces
- Options:
- query name
Column name from the query containing date range to span
- Options:
- column name
A manually specified start date to use for the range
- Options:
- string formatted YYYY-MM-DD
A manually specified end date to use for the range
- Options:
- string formatted YYYY-MM-DD
Title to display in the Date Range component
- Options:
- string
Customize "Select a Range" drop down, by including present range options. Range options: 'Last 7 Days' 'Last 30 Days' 'Last 90 Days' 'Last 3 Months' 'Last 6 Months' 'Last 12 Months' 'Last Month' 'Last Year' 'Month to Date' 'Year to Date' 'All Time'
- Options:
- string | array of values e.g. {['Last 7 Days', 'Last 30 Days']}
Accepts preset in string format to apply default value in Date Range picker. Range options: 'Last 7 Days' 'Last 30 Days' 'Last 90 Days' 'Last 3 Months' 'Last 6 Months' 'Last 12 Months' 'Last Month' 'Last Year' 'Month to Date' 'Year to Date' 'All Time'
- Options:
- string e.g. Last 7 Days or Last 6 Months