Какой самый эффективный способ заполнить время (или временной диапазон)?

Question

Хотя существует множество решений для ввода дат (таких как календари, раскрывающиеся меню и т. Д.), Не кажется, что существует слишком много «стандартных» способов запроса времени (или временного диапазона).

Я лично пробовал выпадающие меню для часовых, минутных и секундных полей (а иногда и для поля «AM / PM»). Я также попробовал несколько часовых устройств ввода, большинство из которых слишком сложно использовать для типичного конечного пользователя. Я даже пробовал "всплывающие" меню выбора времени (которые позволяют, например, навести курсор на час "10", чтобы получить подменю, которое содержит ": 00", ": 15", ": 30 ", и": 45 ") - но ни один из этих методов не кажется естественным.

Пока что лучший (и самый универсальный) метод, который я нашел, - это просто использовать простые текстовые поля и заставлять пользователя вручную вводить часы, минуты и секунды. Кроме того, у меня был хороший опыт создания чего-то похожего на «Дневной обзор» Outlook, который позволяет перетаскивать событие, чтобы установить время начала и окончания.

Есть ли "лучший способ" запросить эту информацию? Кто-нибудь использует какой-то виджет ввода времени, который действительно интуитивно понятен и прост в использовании? Или есть хотя бы способ, который более эффективен, чем использование текстовых полей?

Answer 1

Я большой поклонник простого языка ввода (на днях была тема об этом). Мне нравится, как календарь рюкзака 37signals позволяет вам печатать вещи (8/12 15:00 Встреча с Томом). Мне также нравится, как они обрабатывают время с помощью своей системы напоминаний (они дают вам такие варианты, как позже сегодня, завтра утром).

Answer 2

Я считаю подход Календаря Google лучшим. Используйте текстовое поле, но используйте JavaScript, чтобы сделать его своего рода раскрывающимся списком для выбора вашего времени. Хорошую демонстрацию можно найти для реализации jQuery здесь

Я еще не реализовал это на своем сайте, поэтому я не уверен на 100%, но я думаю, вам также нужен код из этого плагина jQuery:
http://www.texotela.co.uk/code/jquery/timepicker/

Редактировать
Первая ссылка, которую я разместил, не требует кода второй ссылки. Это просто основано на этом. Чтобы получить действительный файл JavaScript из примера, вы можете просмотреть исходный код страницы, чтобы найти, где находится файл, или перейти непосредственно по URL-адресу
http://labs.perifer.se/timedatepicker/jquery.timePicker.js

Answer 3

Существует довольно полезный инструмент ввода времени для JQuery. Он обеспечивает подход типа «спиннер» в дополнение к стандартному текстовому полю. Он также поддерживает использование колесика прокрутки мыши для настройки (а также традиционный подход «просто введите его») и может быть настроен так, чтобы ограничивать n минутными шагами, если хотите. Он довольно настраиваемый, поддерживает локализацию и множество других настроек, я успешно использовал его на нескольких проектах / демонстрационных сайтах.