CODEWITHSUNDEEP
javascriptjquerytimewidget
javacoder
javacoder

Reputation: 752

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

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

Upvotes: 5

Views: 6078

Answers (4)

RaYell
RaYell

Reputation: 70414

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.

Google Calendar Time Ranage
(source: rajchel.pl)

Upvotes: 2

Christophe Roussy
Christophe Roussy

Reputation: 16999

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 commercial software.

Prerequisites:
    jQuery
    jQuery UI Core
    jQuery UI Widget
    jQuery mousewheel plugin (optional)

Upvotes: 0

Luci
Luci

Reputation: 3264

http://trentrichardson.com/examples/timepicker/

go to " Show only the time picker without date picker" and check if that is what you need.

Upvotes: 1

scunliffe
scunliffe

Reputation: 63588

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:

Upvotes: 1

Related Questions