How should I format my Date field Helper Text?

Question

We are adding helper text to our date fields so the user knows whether to type month or day first.

The date field will be forgiving and smart. So it will allow users to type in dates in many different formats. They will be able to type:

• Without using slashes (we may or may not put slashes in while they type, haven't decided yet)
• 1 digit for month
• 1 digit for day
• 2 digits for year

Should helper text be displayed as the format that they could possibly type (only 2 digits for year - mm/dd/yy) OR how the entry will be formatted once the user finishes (mm/dd/yyyy)?

Answer 1

It would be great if the helper text showed the input date in written form so the user gets feedback after they input a date into the field that validates the intended entry. This should help bridge the gaps in language, formatting, and other variables that come with dates.

Answer 2

First users locale should be considered and input format provided as per their settings if available, otherwise good to use location service(may be IP) to find out that regions preferred format.

Once user acceptable format is found, show that either as a placeholder text, or close to the input element.

Most of the users are familiar with single digit day/month input along with space to jump to next type.

Example:- to input 5th March 2017 I would type 5[space]3[space]17 and you can use delimiter (- or /) to separate days, months and year values.

This also gives visual feedback to user. I would suggest still to retain the mmddyy i.e acceptable format close to the input element, to clear abiguity between dd mm, which is what.

And some validations are needed on day,month, year values like not more than expected values, not entered etc.

Mask all alphabets and special characters on the input field (Only numbers and space).

Give visual feedback like soft red text to highlight the error part of the date format like ddmmyy, or some other ways.

Hope this helps