jquery.timepickr.js (Haineault)

[Editor's note: Graceful javascript GUI for setting time based on intuitive method. Thanks Peter!]

Republished from Haineault.com. Get the source code there.

Experimental code !

This is my humble attempt to enhance web time picking.

For the moment I’d call it a toy project, it might stay in experimental state evitam eternam.. I just wanted to see if I could create a better time picker.
I’ve seen lots of time pickers styles and approaches, but none seems to focus on user experience accross many platforms and beautiful degradation.

So I’ve determined a set of goals to achieve a better time picker.

Goals

  • Unobtrusive
  • Graceful degradation
  • Using maximum 2 clicks
  • Intuitive keyboard navigation
  • Be touch friendly (think iphone, tablet pc, etc..)

Demo

View video of GUI in action
(or click on image below, javascript embed don’t work in WordPress, sorry)

Basic usage

$(function(){
    $('#test-1').timepickr({handle: '#trigger-test'});
});

Options

Options Default Description
handle false handle is a dom element which will open the menu upon click
hours true display hours
minutes true display minutes
seconds false display seconds
range24 $.range(0, 24) available hours to pick in 24 format (0, 23)
range12 $.range(0, 12) available hours to pick in 12 format (1, 12)
rangeMin ['00', '15', '30', '45'] available minutes to pick
rangeSec ['00', '15', '30', '45'] available minutes to pick
apm ['am', 'pm'] AM/PM labels
convention 12 hour convention (12 or 24)
val false Initial value
dropslide object dropslide options

Tested browsers

  • Mozilla Firefox 2 (Windows)
  • Mozilla Firefox 3.0.3 (Linux)
  • Mozilla Firefox 3.0.3 (Windows)
  • Epiphany Web Browser 2.22.2 (Linux)
  • Safari 3.1.2 (Windows)
  • Microsoft Internet Explorer 6
  • Microsoft Internet Explorer 7

Todo

  • Internationalization (different time formats, ex 24h)
  • Custom positioning (left, center, right)
  • am/pm mouse follow should be optional
  • Fix remaining behavior bugs
  • Test browser compatibility
  • Make animation more smooth
  • Make all options work
  • Support for seconds
  • Allow custom handler (click clock icon = open picker)
  • keynav: esc = leave & reset
  • keynav: enter, space = commit
  • keynav: arrows = navigate
  • Labels for hour, min, sec
  • Allow custom positioning/orientation of am/pm picker
  • try to make a vertical version of it

Tags: , , , , ,

Comments are closed.