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.

OverviewPropertiesUsage

TimeframeSelectorProps

Signature:

export declare type TimeframeSelectorProps = <<{ from: ; to: ; }> | <> | , (value: | ) => > & & & & & { /** * Shows the button if set to true. * @defaultValue false */ clearable?: ; /** The ISODatetime of the earliest datetime that can be configured. */ min?: ; /** The ISODatetime of the latest datetime that can be configured. */ max?: ; /** * The precision of the time shown in the display value. * @defaultValue */ precision?: | | ; /** * Whether the TimeframeStepper is shown. * @defaultValue true */ stepper?: ; };

TimeframeSelectorBaseProps — deprecated

• please use TimeframeSelectorProps instead.

extends, , , ,

Name	Type	Default	Description
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.
min?		-	The ISODatetime string of the earliest datetime that can be configured.
max?		-	The ISODatetime string of the latest datetime that can be configured.
precision?	| |	'minutes'	The precision of the time shown in the display value.
stepper?		-	Whether the TimeframeStepper is shown.

TimeframeSelectorControlledProps — deprecated

• please use TimeframeSelectorProps instead.

Name	Type	Default	Description
value	<{ from: ; to: ; }> | <> |	-	The controlled value of the timeframe selector, containing the 'from' and 'to' timeframe details.
onChange	(value: | ) =>	-	Handler gets called if value state has changed.

TimeframeSelectorUncontrolledProps — deprecated

• please use TimeframeSelectorProps instead.

Name	Type	Default	Description
defaultValue?	<{ from: ; to: ; }> | <> |	-	The default, uncontrolled value of the timeframe selector, containing the 'from' and 'to' timeframe details.
onChange?	(value: | ) =>	-	Handler gets called if value state has changed.

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: ; }) => ); };

Name	Type	Default	Description
children?	| ((customTriggerProps: { displayValue: ; }) => )	-

TimeframeSelector.CustomTrigger

TimeframeSelectorCustomTriggerProps

Signature:

export declare type TimeframeSelectorCustomTriggerProps = & & & { /** Elements to be displayed in the CustomTrigger. */ children: | | ((customTriggerProps: { displayValue: ; isInvalid: ; hint: ; }, props: ( & & & (<<<>>> & )) | ) => ); };