Mobile Date Picker Overlay UI Design

Still continuing with date picker designs – can’t seem to get over it :)

This is a new design for the <vaadin-date-picker> HTML element from Vaadin Core Elements, and how it should behave on small viewport sizes.

Instead of the current behavior, where the whole screen is covered with the overlay, this design tries to present itself as a “custom keyboard” to select dates and leaves the actual field visible above the date selector.

The design still has the same “speed dial” for the year list as the current implementation (parallax scrolling together with the month list).