Always disable autocomplete for date pickers

Updated . Posted . Visible to the public. Repeats.

When we write a form with date fields, we often use graphical data picker like Rome Show archive.org snapshot to get a consistent calendar popup on all browsers.

When you integrate a date picker popup, remember to also set autocomplete="off" on the text input that opens the calendar on click. Otherwise the autocomplete suggestions will cover the calendar box and make it unusable:

Image

If you are using a tool like Unpoly Show archive.org snapshot you might want to set autocomplete="off" in the JavaScript that also initializes your date picker library:

up.compiler('.date-picker', function(input) {
  input.setAttribute('autocomplete', 'off')
  rome(input)
})

This way users with JavaScript disabled (and hence no calendar popups) will still get the browser's default autocomplete behavior.

Henning Koch
Last edit
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2020-04-20 06:45)