DatePicker

The DatePicker component allows users to choose a specific date from a calendar or enter it via keyboard.

Import

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

Use cases

Control the state

The date picker can be controlled, meaning that you can handle the state. To do so, you need to use the onChange prop to provide a handler that is called when the internal state of the date picker changes. You also need to assign the value from the state to the date picker by setting the value prop. The value can either be an ISO string or null. The onChange is not called with the new value if the date could not be parsed (e.g. if the user types an invalid date).

CodeSandbox

Validate

This example shows how you can validate the date picker using the react-hook-form package, which handles error messages. For connecting the form with the date picker and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override the error messages and connect the date picker'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. You can also add custom validation logic when registering the input by passing in a validate function to the register options.

CodeSandbox

Props

DatePickerProps

extends, , ,

Name	Type	Default	Description
value	|	null	The actual value of the datepicker (controlled). It is used for initializing the parsed time and rendering the display value.
id?		-	The id of the datepicker text input.
name?		-	The name of the datepicker text input.
disabled?		false	Disables the whole date picker.
required?		false	Whether a date has to be selected before the date picker can be closed.
showTime?		false	Whether the time is shown (in addition to the date) in the datepicker input.
fillUpTime?		undefined	Used to flatten the time to day-start (if false) or day-end (if true) when a date is selected from the calendar. If undefined, the time is preserved and not flattened.
buttonRef?	<>	-	Reference of the overlay trigger button.
onChange	(value: DateerValue) =>	-	Callback triggered when the datepicker value changes (controlled).
onInputBlur?	(event: <>) =>	-	Callback triggered when the datepicker input is blurred.
onInputValueChange?	(value: , event?: <>) =>	-	Callback triggered when the datepicker input value changes.
onCalendarValueChange?	(date: | , event?: ) =>	-	Callback triggered when the calendar value changes.