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.

OverviewPropertiesUsageAccessibility

Import

import { DateTimePicker } from '@dynatrace/strato-components/forms';

Demo

Control state

You can also handle the state of the DateTimePicker component, making it controlled. In order to do so, you need to set the value prop to assign the state value. In addition, you need to use the onChange prop to provide a handler that is called when the state of the DateTimePicker changes.

Display types and precision

The DateTimePicker component can be used to let users select or display a date, time, or both. For time and datetime types, the time precision can be configured.

Min and max values

Minimum and maximum boundaries for date, time, and datetime values can be set with the min and max props. You can provide any ISOString or expression to be used as upper or lower bound.

Validation

For validation patterns including custom hints and errors, see show custom hints and errors in the FormField documentation.

OnChange

The onChange callback returns a TimeValue when valid and an empty string when invalid, or null when empty. This information can be helpful to validate the DateTimePicker. The returned ISOStrings are formatted in UTC time, with precision prop defining their precision.