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.

    TimeframeSelectorProps

    Signature:

    export declare type SelectorProps = <<{ from: ; to: ; }> | <> | , (value: | ) => > & & & & & { /** * Shows the button if set to true. * @defaultValue false */ 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, , ,
    NameTypeDefaultDescription
    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<>, , ,
    NameTypeDefaultDescription
    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: ; }) => ); };
    NameTypeDefaultDescription
    children?
    | ((customTriggerProps: { displayValue: ; }) => )

    TimeframeSelector.CustomTrigger

    TimeframeSelectorCustomTriggerProps

    Signature:

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