Skip to main content

DateTimePicker

Component to comfortably enter a date time value. The DateTimePicker component automatically uses the user's settings for the locale and timezone and formats the date and time accordingly.

OverviewPropertiesUsageAccessibilityChangelog3.14.0

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

3.11.0​

Updates​

  • Fixed a race condition where rapid ArrowUp/ArrowDown presses caused the displayed value to flicker. (APPDEV-18555)
  • Fixed the calendar button from showing hover styles when DateTimePicker is disabled. (APPDEV-18548)
  • Improved min/max boundary hint and error messages, and added dedicated messages for "Now" boundaries. (APPDEV-18457)
  • You can now use onFocus and onBlur props on DateTimePicker; both fire at the whole-component boundary so opening and closing the calendar overlay does not produce spurious blur or focus events. (APPDEV-17911)

3.9.0​

Updates​

  • Fixed the TypeError caused by Intl.DisplayNames.supportedLocalesOf being unavailable. (APPDEV-18299)

3.7.0​

Updates​

  • Letter key presses in a number spin button are now silently ignored. (APPDEV-17978)
  • Right-clicking after selecting across multiple fields now shows the browser's native Cut/Copy context menu, without losing the current selection. (APPDEV-17476)

3.6.0​

Updates​

  • Fixed an issue where pressing Backspace after selecting all spin buttons via Ctrl+A and then clicking a single spin button would clear all spin buttons instead of only the clicked one. (APPDEV-17766)
  • Now copies placeholder text when digits are missing. (APPDEV-17358)
  • Fixed undo reverting more than the last pasted input. (APPDEV-17359)

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)

Forms​

  • Improved read-only state for form components: TextInput, TextArea, PasswordInput, NumberInput, DateTimePicker, DateTimeRangePicker, Select, Switch, Checkbox, RadioGroup and ToggleButtonGroup. (APPDEV-16539, APPDEV-16540, APPDEV-16542, APPDEV-16543, APPDEV-16544, APPDEV-16545, APPDEV-16546, APPDEV-16547, APPDEV-16548)
  • Default placeholder texts are now shown when no placeholder is explicitly provided. (APPDEV-17048)
  • 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 without breaking the input. (APPDEV-17299)
  • Selected SpinButton values can now be deleted via Delete, Backspace, and Cut. (APPDEV-16125)
  • Relative-value expression inputs now support partial text selection and deletion. (APPDEV-17229)
  • Selection behavior for spin buttons when using Shift+ArrowLeft/ArrowRight now allows values to be deselected correctly. (APPDEV-17229)
  • Spinbutton placeholders now use uppercase format (YYYY, MM, DD) for improved clarity and consistency.

3.3.0​

Updates​

  • Added data-dt-properties attribute to the calendar's header, day, month, and year buttons.
  • Now supports clearing the selected value via a built-in clear button. (APPDEV-16374)

3.2.0​

Updates​

  • Added data-dt-name attributes to the button opening the calendar, and the calendar's header, day, month, year, and stepper buttons. (APPDEV-16671)
  • 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)

3.1.0​

Updates​

  • No longer shows a transition animation when navigating between date and time spin buttons so that the selection highlight switches instantly. (APPDEV-16135)
Still have questions?
Find answers in the Dynatrace Community