Improving a Datepicker

Introduction

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„.

Before

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

After

Fig. 2: Date Picker UX After
Fig. 2

Before/After

Drag the ◄ ►

Datepicker UX Before
Datepicker UX After

Fig. 3
Link to example source

https://www.swisslos.ch/de/swisslotto/information/statistiken/gewinnzahlen-quoten.html (19.09.2017)