Display date suggestions as dd/mm/yyyy or DD/MM/YYYY

Question

I have found a lot of posts regarding how to display the order of a date (MM/DD/YYYY vs DD/MM/YYYY) but I haven't found any regarding how to display a "This is how your date should look" hint to a user. Below is an example of how I am currently displaying this hint to a user.

I am wondering if there is some sort of standard regarding how to display this hint to a user? Or if I can do whatever I like as long as I am consistent throughout my project?

All lower case:

dd/mm/yyyy mm/dd/yyyy mmyyyy ddmmyyyy

All upper case:

DD/MM/YYYY MM/DD/YYYY MMYYYY MMDDYYYY

Capital month:

dd/MM/yyyy MM/dd/yyyy MMyyyy ddMMyyyy

Displaying inconsistently, but may be visually appealing for its condition

dd/mm/yyyy mm/dd/yyyy MMYYYY ddMMyyyy

Answer 1

I would definitely include the slashes if your input field has them too. It must look at much as valid input as possible. Developers need to worry about the difference between M (usually months) and m (usually minutes), but not your users.

Or if I can do whatever I like as long as I am consistent throughout my project

Yes, consistency is important. All lower case seems (to me) to be more readable than all upper case, so I would go with dd/mm/yyyy or mm/dd/yyyy in your case (depending on the locale of your users).

That said, have you considered a date picker? It's excellent for casual users who don't want to be bothered about date formats; if you keep the option open to just type the date, power users will be happy as well.

Answer 2

Three principles to respect:

1. Consistency: your UI should be as intuitive as possible, following existing patterns (localized date-format), conventions (common abbreviations for date-parts) and input elements (date-picker)
2. Use clear language: instead of hints with syntax, explain by example:

   Enter the date in format dd/mm/yyyy. Example: for 28th December 2021 enter 28/12/2021

3. Adapt to your target users: if user is a developer a syntax-oriented input might suffice like dd/MM/yyyy whereas non-technical users might be used to and even expecting a date-picker to select a date graphically. Some support like default prefilled with today's date or auto-completion may further enhance usability.

See also

• Date and time format placeholders

• How should I format my Date field Helper Text?

• Gaceful alternate to consistency in date entry