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

<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: