Drag’n Drop JavaScript Time Picker
1
Aug
This is a JavaScript time picker with a drag’n drop enabled clock interface.
Usage is very simple, hour and minute hands can be dragged & dropped to the desired value. Clicking to the AM-PM also enables you to switch between them.
This time picker is highly configurable including the "starting hour", sizes & images used.
It requires Mootools and the document to be a XHTML doctype to run. Download package includes all the necessary resources including the PSD files.
Requirements: Mootools 1.11+, XHTML doctype
Compatibility: All Major Browsers
Website: http://www.nogray.com/time_picker.php
Compatibility: All Major Browsers
Website: http://www.nogray.com/time_picker.php
- Tags:
Drag'n Drop Javascript Mootools
- Filed under: Forms, Goodies, MIT License
- 6 Comments
6 Responses for "Drag’n Drop JavaScript Time Picker"
[...] Vía: http://www.webresourcesdepot.com [...]
Very pretty, but a really awful idea from a usability point of view.
really excellent .
It’s very nice, but is has one problem when using it with 24 hours. If you have a time like 23:40, when trying to change anything, it automatic changes the hour to 11:40. If some one could fix this, then this clock became super.
This is nice eye candy but there are a few usability considerations. Firstly, analog clocks are growing increasingly obscure, and younger people sometimes have a difficult time reading them. Secondly, dragging with a mouse to a specific time is a bit tedious, just like the timepickers that use a slider. Thirdly, keyboard interaction for this picker is a bit sporadic.
For a more usable time picker, check out the Any+Time(TM) JavaScript library, which uses simple “buttons” to select specific times with speed and ease:
http://www.ama3.com/anytime/
An interesting test of usability is this: pick an odd time (say, 10:32pm) at random, then see how long it takes to accurately select that time using various time pickers. You can probably do it faster with Any+Time(TM) than you could write out the time by hand… just try to find another style picker that you can say that about! Not to mention, Any+Time supports a countless variety of date/time formats, 12/24-hour clock, full CSS (or jQuery UI) customization and even time zones!
Hello sir, i want to change time picker value after selecting time
for e.g i selected time from time picker is 00:00 in 24 hours format everything is working fine but instead of 00:00 i want to store it 24:00
e.g 00:00 i want 24:00
00:20 i want 24:20
so pls give me the solution as soon as possible
Thanks