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
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.
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.
Disable the timeframe selector
To disable the timeframe selector, add the disabled property.
Get timeframe details
If you need more information about the timeframe, you can take a look at the
details object returned by onChange.
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.
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.
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.
Props
TimeframeSelectorProps
, , , | Name | Type | Default | Description |
|---|---|---|---|
value | | | - | The value of the timeframe selector, containing the 'from' and 'to' string representations and timeframe details. |
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? | false | Shows the "Clear selection" button if set to true. | |
readOnly? | false | Determines whether the component is in read-only mode, which means the overlay doesn’t open and the onChange isn't called. | |
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. | |
min? | - | The ISODatetime string of the earliest datetime that can be configured. | |
max? | - | The ISODatetime string of the latest datetime that can be configured. |