Skip to main content

    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 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
    Still have questions?
    Find answers in the Dynatrace Community