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

• javascript
• jquery
• time
• widget

4 Answers 4

Google 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)