How to use autocomplete="bday" in MM/DD/YYYY format?

Question

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

I want to use autocomplete="bday", but I don't want to use the hyphen format specified by WHATWG.

What can I do about this? Can I expect mobile browsers (mainly iOS/Android) to enter the fields into this box correctly.

Answer 1

Use a date type input instead of anything else

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

• Enter and display dates in the user's preferred locale
• Contains calendar widget for selecting dates
• Basic front-end field validation, usually ensuring you always have a valid date in yyyy-mm-dd format

But in practice,

• Date input type is not supported by older browsers/devices, especially some phones (this is the bottom line!)
• Input fields and/or associated calendar widgets are not always easily accessible (what a shame!)
• You have no control over the exact appearance of the component (ideally you shouldn't care too much about it, but that's okay)

Using the most professionally appropriate input type for a given field if one exists (here, date) is usually the best thing you can do, and will definitely be better in the long run from both a user and development perspective is the best thing you can do/maintain the perspective. It's guaranteed by standards, which means you can expect better support over time without having to do anything on your part, and the feature won't suddenly disappear.

However, the loss of control over precise appearance in particular, and the current lack of support, especially on probably most importantly mobile phones, unfortunately leads to the selection of text type input, a series of more or less accessible Combo boxes and/or calendars which are not very accessible most of the time, rather than just standard input dates.

If you cannot or do not want to use date type input

Autocomplete content always populates fields in the yyyy-mm-dd format, which conflicts with your preferred format, and you cannot change it. So you don't have many solutions:

• Be tolerant of the input you accept, especially both yyyy-mm-dd and mm/dd/yyyy.
• Capture the browser's autocompletion and convert yyyy-mm-dd to mm/dd/yyyy when detected

Both will make your input field less stable, less reliable, and less understandable to users. I guess it's not easy, maybe even impossible, to reliably detect browser autocomplete on all browsers, and when the interface says "write date in mm/dd/yyyy format" and the field contains yyyy-mm, Users may get confused - dd (Which format should I use? Which format is correct? What to write in the field now or what to give as instructions?)

Date type input will take away all the hassle, whether you want it or not, this is my final suggestion. We can expect that accessibility and support will improve over time without any action on your part. Entering dates has improved a lot since it was introduced a few years ago. Forget about pixel-perfect designs. Use standards wherever possible.