Improving a Datepicker


Through a series of examples I show, how to achieve big UX improvement with small changes in the code (HTML, CSS, Javascript). I called this „Low-cost sophistication„.


Fig. 1: Assignment of days, the middle axis between month and year is optically dividing the calendar below etc. Looks like not finished design.

Date Picker UX Before
Fig. 1 swisslos-before-02.jpg


Fig. 2: Date Picker UX After
Fig. 2


Drag the ◄ ►

Datepicker UX Before
Datepicker UX After

Fig. 3
Link to example source (19.09.2017)