Date Input
A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.
To see how to filter a query using an input component, see Filters.
```sql filtered_query
select
*
from ${orders_by_day}
where day > '${inputs.range_filtering_a_query.value}'
```
<DateInput
name=date_filtering_a_query
data={orders_by_day}
dates=day
/>
<BarChart
data={filtered_query}
x=day
y=sales
/>Examples
Using Date Input from a Query
The Date selected can be accessed through the inputs.[name].value
Date Selected: 2019-01-02
<DateInput
name=date_range_from_query
data={orders_by_day}
dates=day
/>
Date Selected: {inputs.date_input_from_query.value}With a Title
<DateInput
name=date_range_with_title
data={orders_by_day}
dates=day
title="Select a Date Input"/>Date Range
Creates a date picker for selecting a date range to filter queries, with selectable preset date options.
Filtering a Query with Range Calendar
The Date selected can be accessed through the inputs.[name].start & inputs.[name].end
```sql filtered_query_ranged
select
*
from ${orders_by_day}
where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_filtering_a_query.end}'
```
<DateInput
name=range_filtering_a_query
data={orders_by_day}
dates=day
title='Date Range'
range
/>
<LineChart
data={filtered_query_ranged}
x=day
y=sales
/>Default Value for Preset Ranges
<DateInput
name=name_of_date_range
defaultValue={'Last 7 Days'}
range
/>Customizing Single Preset Ranges
<DateInput
name=name_of_date_range
range
presetRanges={'Last 7 Days'}
/>Customizing Multiple Preset Ranges
<DateInput
name=name_of_date_range
range
presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']}
/>Manually Specifying a Range
<DateInput
name=manual_date_range
start=2019-01-01
end=2019-12-31
range
/>Options
- Options:
- string
- Options:
- query name
- Options:
- column name
- Options:
- string formatted YYYY-MM-DD
- Options:
- string formatted YYYY-MM-DD
Title to display in the Date Input 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 Input 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