TimeframeSelector
Use the TimeframeSelector to let users filter data by time, choosing from
preset timeframes or entering a custom start and end time.
TimeframeSelectorProps
Signature:
export declare type SelectorProps = <<{
from: ;
to: ;
}> | <> | , (value: | ) => > & & & & & & {
/**
* Shows the button if set to true.
* @defaultValue false
* @deprecated The `clearable` prop is deprecated in favor of the new clear button directly located in the input.
*/
clearable?: ;
/**
* The ISODatetime of the earliest datetime that can be configured.
* @defaultValue '1677-09-21T00:12:43.145224192Z'
*/
min?: ;
/**
* The ISODatetime of the latest datetime that can be configured.
* @defaultValue '2262-04-11T23:47:16.854775807Z'
*/
max?: ;
/**
* The precision of the time shown in the display value.
* @defaultValue
*/
precision?: | | ;
/**
* Whether the Stepper is shown.
* @defaultValue true
*/
stepper?: ;
};TimeframeSelector presets components
TimeframeSelector.Presets
The TimeframeSelector.Presets component is used to render the list of preset
items shown in the overlay.
TimeframeSelectorPresetsProps
extends
, , , , | Name | Type | Default | Description |
|---|---|---|---|
children? | | Children shown inside the presets list. A default list of presets is shown if no children are set. |
TimeframeSelector.PresetItem
The TimeframeSelector.PresetItem component is used to render a preset item to
the list of presets shown in the overlay. This needs to be used inside the
TimeframeSelector.Presets component.
TimeframeSelectorPresetItemProps
extends
<>, , , , | Name | Type | Default | Description |
|---|---|---|---|
value | {
/** Start of the time frame. */
from: ;
/** End of the time frame. */
to: ;
} | | The value of the timeframe preset. |
TimeframeSelector trigger components
TimeframeSelector.Trigger
The TimeframeSelector.Trigger component is used to render the trigger that
opens or closes the overlay.
TimeframeSelectorTriggerProps
Signature:
export declare type TimeframeSelectorTriggerProps = & & & & & {
/**
* The placeholder text displayed in the TimeframeSelector.Trigger.
*/
placeholder?: ;
};TimeframeSelector.DisplayValue
TimeframeSelectorDisplayValueProps
Signature:
export declare type TimeframeSelectorDisplayValueProps = & {
children?: | ((customTriggerProps: {
displayValue: ;
}) => );
};TimeframeSelector.CustomTrigger
TimeframeSelectorCustomTriggerProps
Signature:
export declare type TimeframeSelectorCustomTriggerProps = & & & & {
/** Elements to be displayed in the CustomTrigger. */
children: | | ((customTriggerProps: {
displayValue: ;
isInvalid: ;
hint: ;
}, props: ( & & & (<<<>>> & )) | ) => );
};