> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Time Range Picker
> Select date ranges for analysis.
Wrap with the [Filter Provider](/docs/embeddable-ui/components/filter-provider) to apply the selected time range to child components.
```jsx /time-range-picker/page.tsx theme={"system"}
import {
TimeRangePicker,
Flex,
FilterProvider
} from "@propeldata/ui-kit";
export default async function TimeRangePickerExample() {
return (
);
}
```
## Props API
If set to true, disables the option within the picker that allows users to select a range extending to the current date.
If set to true, disables the option for users to select a custom date range.
If set to true, disables the option for selecting relative date ranges, such as "last n days."
If set to true, disables all selectable options in the component, effectively making it read-only.
If true, the entire component is disabled, and users cannot interact with it.
Sets an initial default value for the picker using a structured object that defines a range of options.
A unique identifier for the date range option, used to distinguish between different options.
A human-readable label that describes the date range option.
The value of the date range option, which can be either a specific date range or a relative time range.
The fields required to specify the time range for a time series, counter, or leaderboard Metric query.
If no relative or absolute time ranges are provided, Propel defaults to an absolute time range beginning with the earliest record in the Metric's Data Pool and ending with the latest record.
If both relative and absolute time ranges are provided, the relative time range will take precedence.
If a `LAST_N` relative time period is selected, an `n` ≥ 1 must be provided. If no `n` is provided or `n` \< 1, a `BAD_REQUEST` error will be returned.
The timestamp field to use when querying. Defaults to the timestamp configured on the Data Pool or Metric, if any.
Set this to filter on an alternative timestamp field.
The relative time period.
The Relative time ranges are based on the current date and time.
`THIS` - The current unit of time. For example, if today is June 8, 2022, and
`THIS_MONTH` is selected, then data for June 2022 would be returned.
`PREVIOUS` - The previous unit of time. For example, if today is June 8, 2022, and
`PREVIOUS_MONTH` is selected, then data for May 2022 would be returned. It excludes
the current unit of time.
`NEXT` - The next unit of time. For example, if today is June 8, 2022, and
`NEXT_MONTH` is selected, then data for July 2022 would be returned. It excludes
the current unit of time.
`LAST_N` - The last `n` units of time, including the current one. For example, if today
is June 8, 2022 and `LAST_N_YEARS` with `n` = 3 is selected, then data for 2020, 2021, and
2022 will be returned. It will include the current time period.
* `THIS_HOUR`: Starts at the zeroth minute of the current hour and continues for 60 minutes.
* `TODAY`: Starts at 12:00:00 AM of the current day and continues for 24 hours.
* `THIS_WEEK`: Starts on Monday, 12:00:00 AM of the current week and continues for seven days.
* `THIS_MONTH`: Starts at 12:00:00 AM on the first day of the current month and continues for the duration of the month.
* `THIS_QUARTER`: Starts at 12:00:00 AM on the first day of the current calendar quarter and continues for the duration of the quarter.
* `THIS_YEAR`: Starts on January 1st, 12:00:00 AM of the current year and continues for the duration of the year.
* `PREVIOUS_HOUR`: Starts at the zeroth minute of the previous hour and continues for 60 minutes.
* `YESTERDAY`: Starts at 12:00:00 AM on the day before the today and continues for 24 hours.
* `PREVIOUS_WEEK`: Starts on Monday, 12:00:00 AM, a week before the current week, and continues for seven days.
* `PREVIOUS_MONTH`: Starts at 12:00:00 AM on the first day of the month before the current month and continues for the duration of the month.
* `PREVIOUS_QUARTER`: Starts at 12:00:00 AM on the first day of the calendar quarter before the current quarter and continues for the duration of the quarter.
* `PREVIOUS_YEAR`: Starts on January 1st, 12:00:00 AM, the year before the current year, and continues for the duration of the year.
* `NEXT_HOUR`: Starts at the zeroth minute of the next hour and continues for 60 minutes.
* `TOMORROW`: " Starts at 12:00:00 AM, the day after the current day, and continues for 24 hours.
* `NEXT_WEEK`: Starts on Monday, 12:00:00 AM, the week after the current week, and continues for the duration of the week.
* `NEXT_MONTH`: Starts at 12:00:00 AM on the first day of the next month and continues for the duration of the month.
* `NEXT_QUARTER`: Starts at 12:00:00 AM on the first day of the next calendar quarter and continues for the duration of the quarter.
* `NEXT_YEAR`: Starts on January 1st, 12:00:00 AM of the next year and continues for the duration of the year.
* `LAST_N_MINUTES`: Starts at the zeroth second `n` - 1 minute(s) before the current minute and continues through the current minute. It includes this minute.
* `LAST_N_HOURS`: Starts at the zeroth minute of the `n` - 1 hour(s) before the current hour, and continues through the current hour. It includes this hour.
* `LAST_N_DAYS`: Starts at 12:00:00 AM, `n` - 1 day(s) before the current day, and continues through the current day. It includes today.
* `LAST_N_WEEKS`: Starts on Monday, 12:00:00 AM, `n` - 1 week(s) before the current week, and continues through the current week. It includes this week.
* `LAST_N_MONTHS`: Starts at 12:00:00 AM on the first day of the month, `n` - 1 month(s) before the current month, and continues through the current month. It includes this month.
* `LAST_N_QUARTERS`: Starts at 12:00:00 AM on the first day of the calendar quarter `n` - 1 quarter(s) before the current quarter and continues through the current quarter. It includes this quarter.
* `LAST_N_YEARS`: Starts on January 1st, 12:00:00 AM of the year `n` - 1 year(s) before the current year and continues through the current year. It includes this year.
* `LAST_15_MINUTES`
* `LAST_30_MINUTES`
* `LAST_HOUR`
* `LAST_4_HOURS`
* `LAST_12_HOURS`
* `LAST_24_HOURS`
* `LAST_7_DAYS`
* `LAST_30_DAYS`
* `LAST_90_DAYS`
* `LAST_3_MONTHS`
* `LAST_6_MONTHS`
* `LAST_YEAR`
* `LAST_2_YEARS`
* `LAST_5_YEARS`
The number of time units for the `LAST_N` relative periods.
The optional start timestamp (inclusive). Defaults to the timestamp of the earliest record in the Data Pool.
The optional end timestamp (exclusive). Defaults to the timestamp of the latest record in the Data Pool.
Controls the current value of the picker through a structured object, enabling controlled component behavior.
A unique identifier for the date range option, used to distinguish between different options.
A human-readable label that describes the date range option.
The value of the date range option, which can be either a specific date range or a relative time range.
The fields required to specify the time range for a time series, counter, or leaderboard Metric query.
If no relative or absolute time ranges are provided, Propel defaults to an absolute time range beginning with the earliest record in the Metric's Data Pool and ending with the latest record.
If both relative and absolute time ranges are provided, the relative time range will take precedence.
If a `LAST_N` relative time period is selected, an `n` ≥ 1 must be provided. If no `n` is provided or `n` \< 1, a `BAD_REQUEST` error will be returned.
The timestamp field to use when querying. Defaults to the timestamp configured on the Data Pool or Metric, if any.
Set this to filter on an alternative timestamp field.
The relative time period.
The Relative time ranges are based on the current date and time.
`THIS` - The current unit of time. For example, if today is June 8, 2022, and
`THIS_MONTH` is selected, then data for June 2022 would be returned.
`PREVIOUS` - The previous unit of time. For example, if today is June 8, 2022, and
`PREVIOUS_MONTH` is selected, then data for May 2022 would be returned. It excludes
the current unit of time.
`NEXT` - The next unit of time. For example, if today is June 8, 2022, and
`NEXT_MONTH` is selected, then data for July 2022 would be returned. It excludes
the current unit of time.
`LAST_N` - The last `n` units of time, including the current one. For example, if today
is June 8, 2022 and `LAST_N_YEARS` with `n` = 3 is selected, then data for 2020, 2021, and
2022 will be returned. It will include the current time period.
* `THIS_HOUR`: Starts at the zeroth minute of the current hour and continues for 60 minutes.
* `TODAY`: Starts at 12:00:00 AM of the current day and continues for 24 hours.
* `THIS_WEEK`: Starts on Monday, 12:00:00 AM of the current week and continues for seven days.
* `THIS_MONTH`: Starts at 12:00:00 AM on the first day of the current month and continues for the duration of the month.
* `THIS_QUARTER`: Starts at 12:00:00 AM on the first day of the current calendar quarter and continues for the duration of the quarter.
* `THIS_YEAR`: Starts on January 1st, 12:00:00 AM of the current year and continues for the duration of the year.
* `PREVIOUS_HOUR`: Starts at the zeroth minute of the previous hour and continues for 60 minutes.
* `YESTERDAY`: Starts at 12:00:00 AM on the day before the today and continues for 24 hours.
* `PREVIOUS_WEEK`: Starts on Monday, 12:00:00 AM, a week before the current week, and continues for seven days.
* `PREVIOUS_MONTH`: Starts at 12:00:00 AM on the first day of the month before the current month and continues for the duration of the month.
* `PREVIOUS_QUARTER`: Starts at 12:00:00 AM on the first day of the calendar quarter before the current quarter and continues for the duration of the quarter.
* `PREVIOUS_YEAR`: Starts on January 1st, 12:00:00 AM, the year before the current year, and continues for the duration of the year.
* `NEXT_HOUR`: Starts at the zeroth minute of the next hour and continues for 60 minutes.
* `TOMORROW`: " Starts at 12:00:00 AM, the day after the current day, and continues for 24 hours.
* `NEXT_WEEK`: Starts on Monday, 12:00:00 AM, the week after the current week, and continues for the duration of the week.
* `NEXT_MONTH`: Starts at 12:00:00 AM on the first day of the next month and continues for the duration of the month.
* `NEXT_QUARTER`: Starts at 12:00:00 AM on the first day of the next calendar quarter and continues for the duration of the quarter.
* `NEXT_YEAR`: Starts on January 1st, 12:00:00 AM of the next year and continues for the duration of the year.
* `LAST_N_MINUTES`: Starts at the zeroth second `n` - 1 minute(s) before the current minute and continues through the current minute. It includes this minute.
* `LAST_N_HOURS`: Starts at the zeroth minute of the `n` - 1 hour(s) before the current hour, and continues through the current hour. It includes this hour.
* `LAST_N_DAYS`: Starts at 12:00:00 AM, `n` - 1 day(s) before the current day, and continues through the current day. It includes today.
* `LAST_N_WEEKS`: Starts on Monday, 12:00:00 AM, `n` - 1 week(s) before the current week, and continues through the current week. It includes this week.
* `LAST_N_MONTHS`: Starts at 12:00:00 AM on the first day of the month, `n` - 1 month(s) before the current month, and continues through the current month. It includes this month.
* `LAST_N_QUARTERS`: Starts at 12:00:00 AM on the first day of the calendar quarter `n` - 1 quarter(s) before the current quarter and continues through the current quarter. It includes this quarter.
* `LAST_N_YEARS`: Starts on January 1st, 12:00:00 AM of the year `n` - 1 year(s) before the current year and continues through the current year. It includes this year.
* `LAST_15_MINUTES`
* `LAST_30_MINUTES`
* `LAST_HOUR`
* `LAST_4_HOURS`
* `LAST_12_HOURS`
* `LAST_24_HOURS`
* `LAST_7_DAYS`
* `LAST_30_DAYS`
* `LAST_90_DAYS`
* `LAST_3_MONTHS`
* `LAST_6_MONTHS`
* `LAST_YEAR`
* `LAST_2_YEARS`
* `LAST_5_YEARS`
The number of time units for the `LAST_N` relative periods.
The optional start timestamp (inclusive). Defaults to the timestamp of the earliest record in the Data Pool.
The optional end timestamp (exclusive). Defaults to the timestamp of the latest record in the Data Pool.
The locale used to format the date and time values, e.g. "en-US".
DateRangeOptionsProps[] | undefined`}>
A function that allows for customizing the list of quick selection options based on default options provided.
void`}>
A callback function that is fired when the selected value changes, providing the new value as an argument.
If true, the select is open by default.
The initial theme used as a base. It provides a default set of styling
from which customizations can be applied.
The global theme accent color. This color is used to highlight elements
The global theme gray color. This color is used for text and background colors
The global theme radius color. This color is used for border radius
The global theme scaling. This value is used to scale components
The global theme panel background. This value is used to set the panel background