autocomplete="bday" with MM/DD/YYYY format?

Question

I am using an input mask to enforce MM/DD/YYYY format on a <input type="text">.

I want to use autocomplete="bday", but I do not want to use the designated hyphen format specified by WHATWG.

What can I do about this? Can I just expect the mobile browser (mostly iOS / Android) to properly input the field into this box.

Answer 1

Use input of type date instead of anything else

In an ideal world, your input should be of type date rather than text. In theory, it provides the following advantages:

• Input and display date in the user's preferred locale
• Included calendar widget to select a date
• Basic front-end field validation that normally ensure you to always have a valid date in yyyy-mm-dd format

In practice however,

• The date input type isn't supported on older browsers / devices, especially some phones (where it's the most crucial!)
• The input field(s) and/or the associated calendar widget isn't always very accessible (what a shame!)
• You don't control the exact appearance of the component (ideally you shouldn't care so much about it, but well)

Using the most specialized appropriate input type for a given field if it exists, here date, is normally the best thing you can do, and is for sure the best thing you can do at long term, both from user and development/maintenance point of view. It's guaranteed by the standards, meaning that you can expect better support as the time goes without needing to do anything on your side, and that the feature won't disappear suddenly.

However, especially the loss of control on exact appearance, and the lack of support right now especially on phones where it's probably the most important, sadly result in choosing an input of type text, a serie of more or less accessible comboboxes and/or a most of the time not very accessible calendar instead of just a standard input date.

IF you can't or don't want to use input of type date

The autocomplete stuff always fills the field in the format yyyy-mm-dd, it contradicts your preferred format, and you can't change that. So you don't have many solutions:

• Be lenient on what you accept as input, and in particular accept both yyyy-mm-dd and mm/dd/yyyy.
• Catch the autocompletion of the browser and convert yyyy-mm-dd to mm/dd/yyyy when you detect it

Both wil make your input field less stable, less reliable, and less understandable for the user. I guess it isn't easy to detect browser autocompletion reliably on all browsers, it's maybe even impossible, and the user can legitimately confused when the interface says "write your date in format mm/dd/yyyy" while the field contains yyyy-mm-dd (Which format should I use ? Which one is correct ? what is written in the field now, or what is given as instructions ?)

An input of type date would remove all that hastle, and this is, as you want or not, my final advice. We can expect that accessibility and support will improve over time without the need for you to do anything. It has already improved a lot since input date were introduced several years ago. Forget out pixel perfect design. Embrass standards whenever possible.