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.

OverviewProperties

Import

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

Use cases

CodeSandbox

Control the 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.

CodeSandbox

Display types and precisions

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.

CodeSandbox

Minimum and maximum 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.

CodeSandbox

Validate

You can validate the DateTimePicker using the react-hook-form package, which handles error messages. For connecting the form with the component for validation, you need to register the field with custom error messages and use the useForm hook from react-hook-form. By using the controlState prop, you can connect the DateTimePicker's error state and message to that of the form. This shows a hint in case of an error and applies proper styling to the component.

CodeSandbox

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.

CodeSandbox