Home Components Date Range

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

Line Chart
Dataset is empty - query ran successfully, but no data was returned from the database 
<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

name
Required
Name of the DateRange, used to reference the selected values elsewhere as {inputs.name.start or inputs.name.end
Options:
string
data
Query name, wrapped in curly braces
Options:
query name
dates
Column name from the query containing date range to span
Options:
column name
start
A manually specified start date to use for the range
Options:
string formatted YYYY-MM-DD
end
A manually specified end date to use for the range
Options:
string formatted YYYY-MM-DD
title

Title to display in the Date Range component

Options:
string
presetRanges

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']}
defaultValue

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
hideDuringPrint
Hide the component when the report is printed
Options: