Adobe transforms the date picker into a world ready (and accessible) component

by

It might seem simple enough.

You need to add a date input field to a submission page on your website. So you create a <form> element with <input type=”text”> and give it a label of date and you call it a day.

And then one day you receive a form submission with the following date:

2/7/2023

February 7, 2023 you think, until you realize that the person who submitted the form is based in the UK, where this date notation would actually mean July 2, 2023.

As noted in a recent announcement about the release of two open source React components:

Many date picker components include a simple text field where the currently selected date is displayed. Sometimes, a user can also type into this field to enter a date, but this is often difficult to use because the user needs to know what date format is expected, and it’s easy to make mistakes. This also poses a challenge for internationalization, because users may enter dates in many different formats, languages, numbering systems, and more. Some of these formats may be ambiguous, for example, is “2/3/2022” “February 3rd” or “March 2nd”? The answer depends on your region of the world. In practice, it is nearly impossible to reliably parse free form text that a user might enter into a date field when you consider all of these possible variations.

Adobe has elevated the date picker to a higher level. Not only is the React Aria data picker internationalized but accessible. And I should note that you’re not locked into using React if you want to take advantage of the underlying libraries.

If you’re curious about the work that went into this date picker — and there was much — click here.

(Visited 21 times, 1 visits today)
John Yunker

John Yunker

John is co-founder of Byte Level Research and author of Think Outside the Country as well as 19 editions of The Web Globalization Report Card.
Tweet
Share