by Mat Janson Blanchet

Avoid presenting dates with only numbers

Posted on January 5, 2024

Takeaways

  • No matter how well-intentioned we may be in our designs or specifications, it’s likely that users will misread a date
  • Context drives what date format to present to users. It’s especially important when a website has international users that come from all sorts of different locales
  • Don’t assume your users will understand what format is used when a date is presented only with numbers, be explicit and label what format is used

This article is part of a series on user interface micro interactions and how they affect the user experience.


How dates are formatted is an often-debated subject, since formatting depends on language, locale, and habits. Even within the same locale, many people disagree on how to write a date.

This issue is more problematic when dates are only written in numbers, e.g.:

10-06-2025

What is this date, June 10th? October 6th? You see the problem this format can cause.

Avoid presenting dates with only numbers

No matter how well-intentioned we may be in our designs or specifications, it’s likely that users will misread a date.

It’s especially important when a website has international users that come from all sorts of different locales.

Be clear in your designs

Wireframes and mock-ups should present what date format to implement per screen. Since the need to present a date may differ per screen, it follows that wireframes and mock-ups show the appropriate information.

Examples of different contexts where a date can be formatted differently: a statement, trip details, and a transactions table

The examples above show a few different ways to format a date.

Note that the context is what drives what date format is presented to users. Also, the idea is not to be clever or to save space, but always to convey information clearly to users.

Ligatures may affect dates presented only with numbers

A ligature is a joining of two characters into one shape. For example, in French “œ” is a ligature of “oe”.

“Ligature”, MDN Web Docs

Ligatures happen in many fonts, although not necessarily in all of them.

It may seem a bit of a stretch to mention ligatures in an article about date formats, however I was recently faced with the following issue when trying to fill a form:

A number-only date input which reads '8/½020'

I took this screenshot from a form I encountered on one of the multiple platforms recruiters and human resources (HR) people use to filter out applicants.

This ridiculous date display struck me because that is not what I typed — willingly entering the “½glyph usually requires me to go out of my way and search for it on Copy Paste Character.

To get to this situation, I opened the date overlay by clicking on the calendar button on the right, selected a date, and this is how the interface formatted the date on its own.

An error message below a date input that reads 'Please use the format m/d/YYYY (e.g. ¼/2024)'

Even more fascinating was when I tried to correct the value, I obtained an error message which showed me that I was expected to use fractions in the input!

I see a few offenses in this design pattern:

Avoid formatting date inputs

Be aware that native date inputs format dates differently per browser

The date format of the native browser date input cannot be changed without a lot of technical effort.

Each browser formats the date differently inside the input field, it even varies on the same operating system (OS)! See a few examples below.

Screenshots of the date input article from MDN web docs for Edge, Chrome, and Firefox on Windows. Each native HTML date input show a different date format.
Date input format comparison on Windows browsers
Screenshots of the date input article from MDN web docs for Chrome, Firefox, and Safari on macos. Each native HTML date input show a different date format.
Date input format comparison on macos browsers

Avoid trying to reinvent the wheel by spending time creating a custom component, or by trying to modify the native HTML input element. Instead, change your mindset and leverage what browsers offer by default and invest your design and development time elsewhere.

Be mindful that this also means you should avoid mentioning an expected date format in the error message for the input, to avoid misleading your users.


References and Additional Readings

Articles

Date and time notation in Canada | Wikipedia

Date format by country | Wikipedia

Date Format in the United States – Americanisms | International Student Office – MIT

Falsehoods programmers believe about time | Tim Visée – GitHub

Use international date format (ISO) | Tips for Webmasters – W3C

ISO 8601 | XKCD

Technical articles

<input type="date"> | MDN Web Docs

font-variant-ligatures | MDN Web Docs

Last updated on February 13, 2024


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.