Micke Alm
 · Head of User Experience at Steven, free-time builder/founder

The 'perfect' datepicker?

Hey guys,
I've been struggling with creating a datepicker I'm actually happy and satisfied with. As a UX-designer, the interaction is important to me so here are a few of the things I've tried:

1. For dates very far back in time, such as date of birth, it can be better to allow the user to type the date instead of using a calendar widget. I haven't found a way to enforce a format in the input field (ie, automatically add dashes to xxxx-xx-xx). Also, I couldn't make three separate input fields with max length work, as FF doesn't seem to have a way to set focus on TextFields.

2. A Textfield with the datepicker button next to it where I set the text of the date from the datepicker. Works, but I had issues with user entry in the field, and instead opted for a 'faux input field', ie, a container that mimics the look. (screenshot) This works, but has issues with both #1 and #3

3. Separate but related issues I'm having is registering an on change in the component so I can for instance disable a save button until change has taken place.

So with all that said, my question is really: Have you guys figured out your perfect datepicker implementation? Do you have a bulletproof go to that you re-use?

Show us what you got!

2
4 replies