Skip to main content

TimeframeSelector

Use the TimeframeSelector to let users filter data by time, choosing from preset timeframes or entering a custom start and end time.

OverviewPropertiesUsageAccessibilityChangelog3.14.0

Changes to TimeframeSelector. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0​

Updates​

  • Fixed onValidityChange being called while controlState is set. (APPDEV-19357)

3.13.0​

Updates​

  • The overlay now has a descriptive accessible name for the "Learn more" link. (APPDEV-18613)

3.11.3​

Updates​

  • Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509)
  • Fixed the TimeframeSelector trigger button missing a descriptive accessible name, causing screen readers to announce only the currently selected value. (APPDEV-19189)
  • You can now listen for onFocus and onBlur events at the whole-component boundary. onBlur is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914)

3.11.1​

Updates​

  • Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509)

3.11.0​

Updates​

  • Fixed the boundary hint shown with a blank date value when an invalid date expression was passed as the min or max prop. (APPDEV-19284)
  • Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457)
  • Fixed TimeframeSelector.PresetItem setting aria-describedby to a non-existent element when the tooltip was closed. (APPDEV-18942)

3.10.0​

Updates​

  • Fixed the issue that caused TimeframeSelector to stop working when selected text was deleted across multiple fields. (APPDEV-18266)

3.9.0​

Updates​

  • Fixed the TypeError caused by Intl.DisplayNames.supportedLocalesOf being unavailable. (APPDEV-18299)
  • Fixed the stepper not shifting absolute timeframes correctly. (APPDEV-18458)

3.8.0​

Updates​

Filters​

  • You can now use the onValidityChange prop on FilterField, SegmentSelector, and TimeframeSelector to react to validation state changes. (APPDEV-17939)
  • Clicking the stepper now saves the shifted value as recently used timeframe. (APPDEV-18225)

3.7.0​

Updates​

  • Fixed the stepper ignoring the controlled value when stepping through timeframes. (APPDEV-18106)
  • Letter key presses in a number spin button are now silently ignored. (APPDEV-17978)
  • Users can now set the start or end time of a range to the current time using the new "Set time to now" button in the calendar overlay. (APPDEV-17429, APPDEV-17430)
  • Right-clicking after selecting across multiple fields now shows the browser's native Cut/Copy context menu, without losing the current selection. (APPDEV-17476)
  • Selecting a preset after stepping no longer restores the previous stepper position on the next step. (APPDEV-18088)

3.6.0​

Updates​

  • When a selection spans both the "from" and "to" inputs and the user types an expression trigger key (n, @, +, -), the "to" input is now also cleared instead of retaining its previous value. (APPDEV-17481)
  • Fixed unreliable focus of the hour spin button after selecting a date from the calendar. (APPDEV-17353)
  • Now copies placeholder text when digits are missing. (APPDEV-17358)
  • Fixed clear button not dismissing validation errors and apply button not working after clearing. (APPDEV-17664)
  • Navigating between the two inputs using Backspace or Delete no longer deletes content in the destination input. (APPDEV-17478)
  • Setting a width on TimeframeSelector now correctly stretches the trigger to fill the available space, with the label left-aligned and the chevron pushed to the right. (APPDEV-17776)
  • Now uses the existing date as a reference when populating hours automatically. (APPDEV-17475)
  • Fixed partial defaultValue or value (only from or only to set) being silently ignored and treated as if no value was provided. (APPDEV-17663)
  • Fixed undo reverting more than the last pasted input. (APPDEV-17359)

3.5.0​

Updates​

  • Fixed a duplicate "Please fill in this field" error message that appeared alongside the "Empty timeframe" validation message. (APPDEV-17488)
  • Backspace and Delete now clear every selected spin button on Safari (cross-side selections included), instead of only the spin button at one end of the selection.
  • Fixed an issue where selecting a preset item triggered a click on elements below the overlay. (APPDEV-17367)

3.4.0​

Updates​

General​

  • Behavior tracking attributes are now supported in all button components, including Button, IntentButton, NotifyButton, and RunQueryButton. (APPDEV-16876)
  • The text and icon color tokens for the success on accent button are now correct. (APPDEV-17388)
  • Behavior tracking attributes are now supported in all form components, including Calendar, Checkbox, DateTimePicker, DateTimeRangePicker, FieldSet, FormField, Label, NumberInput, NumberInputV2, PasswordInput, Radio, SearchInput, Select, Switch, TextArea, TextInput, and ToggleButtonGroup. (APPDEV-16882)
  • Behavior tracking attributes are now supported in FilterBar, FilterField, SegmentSelector, and TimeframeSelector. FilterField.Suggestions and TimeframeSelector.Presets now also support behavior tracking attributes. (APPDEV-16881)
  • Added feature flag and css overrides for design tokens for visual refresh. (APPDEV-17223)
  • Arrow key navigation on empty spin buttons now cycles correctly through values instead of sticking at "00".
  • Changing the precision while a spin button is partially filled now functions correctly and doesn't break the input. (APPDEV-17299)
  • Selected SpinButton values can now be deleted via Delete, Backspace, and Cut. (APPDEV-16125)
  • Calendar now resets the selection when reopened.
  • DateTime inputs can now be scrolled horizontally on mobile devices. (APPDEV-16852)
  • Fixed spin buttons not restoring properly when an absolute value is set to the same date after fields were manually cleared. (APPDEV-17389)
  • Select all in the expression input no longer throws an error when the browser wraps the text content in element nodes. (APPDEV-16987)
  • Relative-value expression inputs now support partial text selection and deletion. (APPDEV-17229)
  • Fixed pasting invalid expressions into the from-input from replacing the arrow separator. (APPDEV-17277)
  • Selection behavior for spin buttons when using Shift+ArrowLeft/ArrowRight now allows values to be deselected correctly. (APPDEV-17229)
  • Fixed digit keys from being incorrectly forwarded from a TextSpinButton (e.g. AM/PM) to an adjacent NumberSpinButton. Digits typed on a TextSpinButton are now silently ignored. (APPDEV-17276)
  • Fixed copying from a single focused field.
  • Pasting formatted dates and times is now supported. (APPDEV-16822)
  • Spinbutton placeholders now use uppercase format (YYYY, MM, DD) for improved clarity and consistency.

3.3.1​

Updates​

  • Fixed preset and recent suggestions being incorrectly disabled when max is set to an expression value (e.g. now). (APPDEV-17327)

3.3.0​

Deprecations​

  • Deprecated clearable prop in favor of the new built-in clear button. (APPDEV-16374)

Updates​

  • The value of the TimeframeSelector can now still be adjusted after selecting everything with Cmd/Ctrl+a. (APPDEV-16861)
  • You can now move between DateTimeInput values with the arrow keys. When typing numbers, focus switches to the next spin-button segment as soon as the current one is complete. (APPDEV-16126)
  • Added data-dt-properties attribute to the 'Apply' button, preset timeframes, and recent timeframes.
  • Now supports clearing the selected value via a built-in 'Clear' button. (APPDEV-16374)
  • Improved support for pasting ISO timestamps or timeframes. Additionally, there's now the possibility to undo after pasting. (APPDEV-16124)

3.2.0​

Updates​

  • The relative TimeValue now supports spinning values with the ArrowUp and ArrowDown keys. Pressing ArrowUp increments the numeric part of the expression (e.g. now-2h → now-1h), and ArrowDown decrements it. (APPDEV-16136)
  • After selecting a timeframe via the Calendar, the focus is now moved to the time input of the start date. (APPDEV-16131)
  • data-dt-name attribute is now available on the following interactive elements: recent/preset timeframes, steppers, calendar and apply buttons, and "Learn more" link. (APPDEV-16603)

3.1.0​

Deprecations​

  • The _isSelected prop on the TimeframeSelector.PresetItem slot is now deprecated. (APPDEV-16158)

Updates​

  • Recently used timeframes are now displayed in the overlay. (APPDEV-16158)
  • Fixed a race condition that could sporadically show Start time must be before end time. while typing in the end time field. (APPDEV-16690)
  • No longer shows a transition animation when navigating between date and time spin buttons so that the selection highlight switches instantly. (APPDEV-16135)
  • When applying a timeframe with one empty field, it is now filled with "Now". (APPDEV-16130)
Still have questions?
Find answers in the Dynatrace Community