Jump to section
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.