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.
Import
import { TimeframeSelector } from '@dynatrace/strato-components-preview/forms';
Demo
TimeframeSelector takes its information from the user's Dynatrace user
settings. The timezone setting determines the timezone offset in
TimeframeSelector, while the region setting determines its display format.
Both the timezone and the region can be set independently. If either is set to
"use browser default," TimeframeSelector will fall back to the user's browser
settings for that value. The value passed to the onChange is converted back to
an ISO string or passed as an expression. See Usage for best
practices.
Control state
TimeframeSelector can be controlled, meaning that you can handle the selection
state. To do so, use the onChange prop to provide a handler to be called when
the internal state changes. You must assign the value from the state to the
TimeframeSelector by setting the value prop.
Set initial values
When you create the state for controlling TimeframeSelector, you can pass a
TimeframeV2 to pre-fill the from and to inputs. To make a pre-filled value
the default or preset selection, initialize the state with an expression
matching the preset.
Customize presets
Use TimeframeSelector.Presets to customize presets and show any timeframe
inside the overlay. Default presets are exported, so you can either add to the
list of default items or override them entirely.
The preset list can display up to ten items. If an invalid preset item is added, it won't be rendered and a console.warn will be called, with details to help you resolve the issue.
Enable timeframe reset
This component provides a button to 'Reset timeframe', giving users the option
to clear a selected timeframe. To display this button, the clearable prop must
be set to true.
Set display precision
Change the default display precision of minutes by setting the precision prop
to either seconds or milliseconds. This also sets the precision of the inputs
shown in the overlay or the returned ISOStrings from the onChange.
Set min and max values
The default min and max values for TimeframeSelector follow the current
Grail limitations for timeframes. You can define a custom min and max range by
setting the min and max props to valid isoString dates. Use FormField
and FormFieldMessages to provide users with helpful error messages.
Validate user input
This example shows how to validate user input in TimeframeSelector using the
react-hook-form package, which handles error messages. To connect the form
with TimeframeSelector, register the field with the custom error message and
use the useForm hook from react-hook-form.
Add custom trigger
TimeframeSelector comes with a default trigger for consistent user experience.
In exceptional cases, if it's necessary, you may override the default trigger.
Make sure to communicate whether a timeframe is selected and, if so, the
timeframe itself.
Props are applied automatically to the TimeframeSelector.CustomTrigger to
ensure correct semantics. Ideally, use a button as the outermost HTML element
inside the custom trigger.
Render custom trigger
We also provide a render function for the TimeframeSelector.CustomTrigger,
giving you access to the displayValue that the TimeframeSelector would have
applied. This enables you to understand the internal logic of the component
before you customize it. When using a render function here, make sure to spread
the props to the trigger element so the interactions tie back to the
TimeframeSelector.
Show custom placeholder
Use the TimeframeSelector.Trigger and the placeholder prop to show a
placeholder for the trigger button. If no option is selected, the placeholder
value is shown by default. Notice that the clearable prop is used here to
enable empty selection.