我在哪里可以找到 Javascript/jQuery 中的时间范围小部件？答案

【问题标题】：Where can I find a time range widget in Javascript/jQuery?我在哪里可以找到 Javascript/jQuery 中的时间范围小部件？
【发布时间】：2009-07-15 13:08:55
【问题描述】：

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

我需要一个网站，以允许企业通过单击并将鼠标悬停在营业时间上来选择营业时间。

+-----------------------------+
| 0h 0h15m 0h30m    ... 23:45 |
+-----------------------------+

有人见过这么好看的可自定义时间范围选择器小部件吗？

干杯

【问题讨论】：

标签： javascript jquery time widget

【解决方案1】：

Google 日历有一个不错的功能（您可以在点击活动详细信息表单上的“检查客人和资源可用性”链接时看到它）。但我可以想象它很难克隆。

_{（来源：rajchel.pl）}

【讨论】：

感谢截图！这正是我正在寻找的，以更紧凑的形式。我无法想象它不存在，例如。作为一个可插入的 jQuery 小部件。

【解决方案2】：

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

jQuery UI 有一个：jQuery UI Slider。

更新：基于以下关于（单滑块与双滑块）的评论...

1.) 已经有（刚刚找到）关于制作2 handled slider using the jQuery UI slider here 的帖子。

或者，如果您有 2 个滑块……一个用于打开时间，一个用于关闭时间……每个滑块分为 15 分钟的片段，但每个片段只有半天，这会起作用吗？

例如（忽略 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

此外，如果这是针对“典型”业务的...您可能会从晚上 11 点早上 5 点开始从滑块开始。

或者，

我不是 scriptaculous 的忠实粉丝，但他们似乎有一个 double slider：

【讨论】：

我也想过这个问题，但是那行不通，因为我们从一开始就不知道有多少个区域。例如。营业时间为上午 8 点至 10 点、12 点至 14 点和 18 点至 20 点。此外，正如我从文档中了解到的那样，每个滑块似乎最多有一个范围。这是我发现的一个带有刻度的示例：jsbin.com/iwime
感谢 scunliffe，我正在使用这个不太灵活的解决方案，直到出现一个小部件！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

这里是jQRangeSlider 和这里Technical demo 的演示

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

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

【讨论】：