Date Picker

I created this date picker as a draft for an upcoming Vaadin Elements web component (http://vaadin.com/elements). Visual inspiration is taken directly from the material design guidelines, with some exceptions in the UI patterns (e.g. browsing and selecting years/months).

The attached .png file includes a sample of the static UI artboards (in double resolution for retina displays):
* a single date picker
* a year/month picker with parallax scrolling
* input date(s) by typing

We used the designs to do some initial usability testing. For that, I created a simple interactive prototype using InVision app. Clearly a couple of icons and links should be adjusted but overall, we found that the users adopted this picker pretty well. You can try the proto by yourself here: https://invis.io/9K5LEUSF6 (works best on mobile).

More by Vaadin

View profile