Where can I find a time range widget in Javascript/jQuery?

Hi,

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

From stackoverflow

• 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.

  

  javacoder : Thanks for the screenshot! That's exactly what I'm looking for, in a more compact form. I can't image it doesn't already exist, eg. as a pluggable jQuery widget.

• 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 comment 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:

  javacoder : I thought about that as well, but that wouldn't really work as we don't know how many regions there are from the start. Eg. A business could be open from 8am-10am, 12-14am and 18-20am. Moreover, as I understand from the documentation, there's a max of one range per slider it seems. This is an example I found with ticks: http://jsbin.com/iwime

  javacoder : Thanks scunliffe, I'm resorting to this not-so-flexible solution, until a widget emerges!