我在哪里可以找到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.

我正在寻找Javascript / CSS / jQuery中的某种TimeRange小部件。我不是在寻找可以广泛使用的时间/日期选择器。

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

4 个解决方案

#1

I'd look for a slider widget.. then set the times you need as the intervals.

我会寻找一个滑块小部件..然后设置你需要的时间作为间隔。

The jQuery UI has one: jQuery UI Slider.

jQuery UI有一个: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.

1.)已经(刚刚找到)关于使用jQuery UI滑块制作2个处理滑块的帖子。

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?

或者如果你有2个滑块...一个用于打开时间,一个用于关闭...其中每个滑块分为15分钟,但每个只有半天,这会有效吗?

e.g. (ignore the ASCII-graphic uglyness)

例如(忽略ASCII图形的丑陋)

 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.

此外,如果这是针对“典型”的企业......你可能会在下午11点从凌晨5点开始切断。

Or,

I'm not a big fan of scriptaculous, but they seem to have a double slider:

我不喜欢scriptaculous,但他们似乎有一个双滑块:

#2

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日历非常好(当您点击活动详情表单上的“检查访客和资源可用性”链接时,您可以看到它)。但我可以想象它很难克隆。

Google Calendar Time Ranage http://stuff.rajchel.pl/*/GoogleCalendarTimeRange.jpg

#3

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

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

转到“仅显示没有日期选择器的时间选择器”并检查是否是您需要的。

#4

http://ghusse.github.io/jQRangeSlider/index.html

Demos here jQRangeSlider and here Technical demo

在这里演示jQRangeSlider和这里的技术演示

jQRangeSlider is open source published under dual license GPL and MIT. You can use it in both open source and commercial software.

jQRangeSlider是在双重许可GPL和MIT下发布的开源软件。您可以在开源和商业软件中使用它。

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

#1