Posted over 2 years 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 Archive 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 Archive 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.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Henning Koch
Last edit:
over 2 years 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 short-lived cookies to improve usability.
Accept or learn more