Read more

Always disable autocomplete for date pickers

Henning Koch
April 20, 2020Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Henning Koch to makandra dev (2020-04-20 08:45)