Date And Time Picker

Press "z"

Production screenshot of date&time picker in the Zello for Work Console.

Designed this, and then I implemented as a set of CSS overrides on top of the default jQuery UI component.

Lighter blue cell is today's date and cell hover state. Darker blue is selected date. Time input fields only accept numeric values and can be modified with steppers. Combo input field at top only accepts numeric values.

Will follow up with touch+mobile implementation — Rather than behaving as a popover menu, it emulates the software keyboard while disabling the actual software keyboard on an input field. Cool stuff.

Posted on Aug 11, 2016
Wil Nichols
Design at Zello

More by Wil Nichols

View profile