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.

    OverviewPropertiesUsageAccessibilityChangelog

    When to use​

    • Users need to select an absolute or relative date, time, or date-time combination, for example for scheduling, alerts, or deployments.
    • A visual calendar will make date-time selection easier and reduce errors compared to manual typing.
    • Localized timezone handling in the input is required.

    When not to use​

    • Users need to select a time range. Use TimeframeSelector instead.
    • Users need to choose partial or approximate dates that don't fit the DD/MM/YYYY format of the DateTimePicker, for example "March 2025" or "Q2 2024". Use Select instead.

    Content guidelines​

    Label (optional)​

    Add a customized label if the purpose for the DateTimePicker isn’t obvious from the context. The label should be descriptive but short (1-2 words).

    Placeholder (required)​

    • Default placeholder for date and time input: Add date and time
    • Default placeholder for date input: Add date
    • Default placeholder for time input: Add time

    The default placeholder text works for most use cases, but if you customize the placeholder, do the following:

    • Use the formula Add + [subject] or [Verb] + [subject]
    • “Add” is the default verb for our placeholders. Don't replace it with alternatives such as “Enter,” “Fill,” or “Type,” unless there's a good reason to do so.
    • Omit unnecessary articles (a, an, the).
    • Don't add periods, ellipses, or exclamation marks.
    Regional formatting

    As soon as a date input is detected, the formatting of the placeholder text switches automatically to that of the user's regional and time settings. For example: DD/MM/YYYY, hh:mm for Europe and the 24-hour clock.

    Use hint for essential information

    Don't use the placeholder for information users need to complete the task, as placeholders disappear when users start typing.

    Hint (optional)​

    Use the hint (FormFieldMessages component) for information users need to avoid errors or work efficiently. Always provide any error messages here too.

    Example hint text: Absolute and relative dates are supported.

    • Keep the hint short.
    • Add periods after sentences.
    Still have questions?
    Find answers in the Dynatrace Community