HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
When using DateInput, you should:
Variants
Single date
Date range
Validation
Components

DateInput

A widget which allows the user to select a date or range of dates from a calendar.

Guidance

  • DateInput can be used to display past, present, or future dates and times.
  • DateInput provides a more guided experience for collecting dates from the user rather than a plain TextInput.
  • The format provides MaskedInput constraints on what can be typed and auto-fills fixed characters.
  • The Calendar Drop provides a familiar visual grid interface.

When using DateInput, you should:

  • Use a label to instruct user what to do with the control.
  • Labels should be clear and descriptive.
  • Correctly format dates to reduce mistakes, such as having the caller specify the appropriate date format for the locale the user is in.
  • For example, in the U.S. dates are formatted as ‘mm/dd/yyyy’ whereas in other countries, such as Europe it might be ‘dd/mm/yyyy’.

Variants

DateInput can be configured to support selection of a single date or a range of dates.

Single date

A single DateInput users can either manually input a date or select a date from the calendar

Date range

DateInput can be configured to allow users to select a start and end date. Users will need to use the calendar to select the range of dates.

Validation

Error messages should clearly identify when a DateInput was not correctly completed and what the user needs to do to fix the error.

Select or type a valid date to resolve this error.

Related

Related content you may find useful when using DateInput.

HPE Forms Preview
Templates

Forms

Common form use cases from application configuration to payment acceptance.
Components

TextInput

TextInput is a field used in forms to capture short entries.
Components

MaskedInput

MaskedInput allows you to specify formatted text within a form field.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page