Где я могу найти виджет временного диапазона в Javascript / jQuery?

Question

Я ищу какой-то виджет TimeRange в Javascript / CSS / jQuery. Я не ищу выбора времени / даты, которые широко доступны.

Мне нужен веб-сайт, чтобы предприятия могли выбирать часы работы, нажимая и удерживая их в течение часов, когда они открыты.

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

Кто-нибудь видел такой симпатичный настраиваемый виджет селектора временного диапазона?

Приветствия

Answer 1

В Календаре Google есть хороший вариант (его можно увидеть, нажав ссылку «Проверить доступность гостя и ресурса» в форме сведений о мероприятии). Но я могу представить, что было бы трудно клонировать.

_{(источник: rajchel.pl )}

Answer 2

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

Перейдите к пункту «Показывать только указатель времени без указателя даты» и убедитесь, что это то, что вам нужно.

Answer 3

Я бы искал виджет слайдера ... затем установил необходимое время в качестве интервалов.

Пользовательский интерфейс jQuery имеет один: Ползунок пользовательского интерфейса jQuery .

Обновление: на основе комментария ниже о (одиночный или двойной слайдер) ...

1.) Здесь уже есть (только что найденный) пост о создании ползунка с обработкой 2 с использованием ползунка jQuery UI здесь .

Или если у вас есть 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, но у них, похоже, есть двойной слайдер :

Answer 4

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

Демонстрации здесь jQRangeSlider и здесь Техническая демонстрация

jQRangeSlider - это программа с открытым исходным кодом, опубликованная под двойной лицензией GPL и MIT. Вы можете использовать его как с открытым исходным кодом, так и с коммерческим программным обеспечением.

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