I'm looking for some sort of TimeRange widget in Javascript/CSS/jQuery. I'm not looking for a time/date picker, which are widely available.
I need it for a website to allow businesses to select their openinghours by clicking and hovering over the hours they're open.
+-----------------------------+
| 0h 0h15m 0h30m ... 23:45 |
+-----------------------------+
Anybody has seen such a nice looking customizable timerange selector widget?
Cheers
I'm looking for some sort of TimeRange widget in Javascript/CSS/jQuery. I'm not looking for a time/date picker, which are widely available.
I need it for a website to allow businesses to select their openinghours by clicking and hovering over the hours they're open.
+-----------------------------+
| 0h 0h15m 0h30m ... 23:45 |
+-----------------------------+
Anybody has seen such a nice looking customizable timerange selector widget?
Cheers
Share Improve this question asked Jul 15, 2009 at 13:08 javacoderjavacoder 7522 gold badges13 silver badges26 bronze badges4 Answers
Reset to default 2Google Calendar has nice one (you can see it when you click "Check guest and resource availability" link on the event details form). But I can imagine it would be hard to clone.
(source: rajchel.pl)
I'd look for a slider widget.. then set the times you need as the intervals.
The jQuery UI has one: jQuery UI Slider.
Update: based on the ment below about (single vs. double slider)...
1.) Theres a post already (just found) about making a 2 handled slider using the jQuery UI slider here.
Or if you have 2 sliders... one for opening time and one for closing... where each is broken down into 15min segments, but only for half a day each, would this work?
e.g. (ignore the ASCII-graphic uglyness)
Open Time (AM): 12 1 2 3 4 5 6 7 8 | 9 10 11 12
^ 8:15am
Close Time (PM): 12 1 2 3 4 5 6 | 7 8 9 10 11 12
^6:30pm
Furthermore, if this is for "typical" businesses... you could likely chop from 11pm <-> 5am from the sliders.
Or,
I'm not a big fan of scriptaculous, but they seem to have a double slider:
http://trentrichardson./examples/timepicker/
go to " Show only the time picker without date picker" and check if that is what you need.
http://ghusse.github.io/jQRangeSlider/index.html
Demos here jQRangeSlider and here Technical demo
jQRangeSlider is open source published under dual license GPL and MIT. You can use it in both open source and mercial software.
Prerequisites:
jQuery
jQuery UI Core
jQuery UI Widget
jQuery mousewheel plugin (optional)