Always disable autocomplete for date pickers

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 Almost 4 years ago