DatePicker
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).
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.