Suggestion for a time picker UI component

Ali Rantakari (

Two input methods for time in forms:

  • Manually edit the text field
    (the input will be validated when focus leaves the text field and when this happens, the component tries to guess what ambiguous inputs mean (e.g. "3" probably means 03:00 (3 pm)))
  • Select time with mouse
    (see images below)

24 Hour clock version 12 Hour clock version
Only three (3) clicks required to pick any time
Only three (3) clicks required to pick any time

The blue and green boxes in the above images are "temporary popups", i.e. when they appear, they float over other UI elements and disappear if the user clicks anywhere else in the user interface. As you can see, minute-level precision has been sacrificed for simplicity.


  Page Info My Prefs Log in
This page (revision-8) last changed on 18:24 25-Mar-2017 by AliRantakari.

Referenced by

JSPWiki v2.4.102