Skip to main content

TimeframeSelector

Use the TimeframeSelector to let users select a timeframe by choosing a from and to value or one of the presets for common timeframes.

There is currently only a controlled version of the TimeframeSelector available. To use the timeframe selector, create a state holding the current value of the timeframe selector and pass the value to the timeframe selector. Use the onChange prop to provide a handler that is called when the internal state of the timeframe selector changes.

Import

import { TimeframeSelector } from '@dynatrace/strato-components-preview/forms';

Use cases

CodeSandbox

Set an initial value

When you create the state for controlling the timeframe selector, you may pass a Timeframe to pre-fill the 'from' and 'to' input.

CodeSandbox

Pre-select a preset

If you want to pre-select one of the presets of the timeframe selector, initialize the state with an expression matching a preset.

CodeSandbox

Disable the timeframe selector

To disable the timeframe selector, add the disabled property.

CodeSandbox

Get timeframe details

If you need more information about the timeframe, you can take a look at the details object returned by onChange.

CodeSandbox

Internationalization

The TimeframeSelector takes care of converting the ISO string to a local date/time for you, so there is no need to handle conversion yourself. The value passed to the onChange is converted back to an ISO string again or passed as an expression.

Use a customized trigger

By default, the TimeframeSelector comes with a trigger that ensures a consistent user experience. In exceptional cases, you may override the default trigger with a custom one. Make sure to communicate whether a timeframe is selected and, if so, the timeframe itself.

We automatically apply props to the provided custom trigger to ensure correct semantics. As an ideal pairing, use a button as the outermost HTML element inside the custom trigger.

CodeSandbox

Enable selection clearing

This component provides a "Clear selection" button, which gives users the option to clear a selected timeframe. In order to display this button, the clearable prop has to be set to true.

CodeSandbox

Validate

This example shows how you can validate the TimeframeSelector using the react-hook-form package, which handles error messages. For connecting the form with the TimeframeSelector and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override the error messages and connect the TimeframeSelector's error state and message to that of the form. This shows a hint in case of an error and applies proper styling to the component.

CodeSandbox

Props

TimeframeSelectorProps

extends
NameTypeDefaultDescription
value
|
-The value of the timeframe selector, containing the 'from' and 'to' string representations and timeframe details.
disabled?
falseWhether the timeframe selector is disabled.
ariaLabelToggle?
-The aria label used for the toggle button of the timeframe selector.
placeholder?
-The placeholder of the timeframe selector trigger button, shown if the value is empty.
clearable?
falseShows the "Clear selection" button if set to true.
onChange
(timeframe: <> | ) =>
-Callback triggered when the timeframe selection changes.
children?
-Optional custom trigger element which should be interactive and might needs to pass props to the deeper nested interactive elements.
Still have questions?
Find answers in the Dynatrace Community