DateTimePicker

Component to comfortably enter a date time value. The value can be entered in the configured locale and timezone. It provides the date as an ISO8601 datetime string shifted to the UTC timezone.

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

Locales and timezones

The DateTimePicker component automatically uses the user's settings for the locale and timezone and formats the date and time accordingly.

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 iso datetime string 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

Props

DateTimePickerProps

Signature:

export declare type DateTimeerProps = DateTimeerBaseProps & (DateTimeerControlledProps | DateTimeerUncontrolledProps) & & DateTimeerTypeProps;

DateTimePickerBaseProps

extends,

Name	Type	Default	Description
readonly?		-	Determines whether the input is in readonly mode.
disabled?		-	Determines whether the input is disabled.
min?	|	-	Earliest allowed ISO datetime for validation.
max?	|	-	Latest allowed ISO datetime for validation.
required?		-	Determines whether the input is required.
name?		-	Name of the control that is submitted with the form.

DateTimePickerControlledProps

Name	Type	Default	Description
value	|	-	Controlled value state of the component.
onChange	(value: ) =>	-	Handler gets called if value state has changed.

DateTimePickerUncontrolledProps

Name	Type	Default	Description
defaultValue?	|	-	Default value to initialize the component in uncontrolled mode.
onChange?	(value: ) =>	-	Handler gets called if value state has changed.