1

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)?

enter image description here

1
  • I guess from a UX point of view the user already "knows" whether to type the month or day first, depending on their location. The real question is, does that match the expectation of your app? If you can run JavaScript on the client, you can discover the correct format easily by creating a Date object, e.g. "var date = Date(2000, 5, 10)" and see how it is formatted when converted to a string. Feb 1, 2018 at 16:40

2 Answers 2

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.

Example image

0

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

1
  • Thank you for the answer. I think having a setting for users to set their preferred format is a good idea! My main question was whether my placeholder text should be formatted as: "mm/dd/yyyy" (the way the date will format once the user finishes) OR "mm/dd/yy" (just showing them that they can put 2 digits for the year)
    – L. Lemmer
    Nov 3, 2017 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.