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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)