[Editor's note: Graceful javascript GUI for setting time based on intuitive method. Thanks Peter!]
Republished from Haineault.com. Get the source code there.
Copyright (c) 2007-2008 Maxime Haineault (haineault.com)
MIT License ~ http://www.opensource.org/licenses/mit-license.php
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: calendar, haineault, javascript, js, time, web time picking