Posted about 1 month ago. Visible to the public. Repeats.

Always disable autocomplete for date pickers

When we write a form with date fields, we often use graphical data picker like Rome 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 you might want to set autocomplete="off" in the JavaScript that also initializes your date picker library:

Copy
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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Henning Koch
Last edit:
about 1 month ago
by Tobias Kraze
Attachments:
date_picker_autocomplete.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more