jQueryUI timePicker — виджет для выбора времени
В процессе работы над корпоративным проектом нередко приходится переключаться на задачи разработки пользовательского интерфейса. Конечно, для реализации фронт-энда мы уже давно не изобретаем велосипеды, а используем готовые компоненты. Казалось бы, на все случаи жизни уже есть свой плагин, но недавно я с удивлением обнаружил, что для поля выбора даты существует огромное количество реализаций элементов-календарей, а вот поле выбора времени как-то обходится стороной.
Подключение элемента почти тривиально:
Правда, есть одно но. Элемент использует изображения. И эти изображения могут располагаться у вас совсем в других местах. Изображения же прописаны в стилях. То есть используя такой элемент на своем сайте, вы должны поместить картинки куда надо, а затем внести соответствующие изменения в стили.
Активация элемента еще проще:
Здесь мы связываем все текстовые поля, имеющие класс time, с нашим элементом. Причем допустимы повторные вызовы.
Можно вызывать для полей, связанных с календарем, при условии, что первым инициализируется календарь. Чтобы timePicker смог вставлять значение времени в такие совмещенные поля, необходимо у datePicker задать в опции dateFormat (и/или в altFormat) символ ‘T’ отделенный хотя бы одним пробелом:
Если у календаря существует altField и altFormat и также содержит ‘T’, время будет устанавливаться и в нем.
Существует два способа получить значение времени, выбранного в поле.
Первый: непосредственно считать value поля. В нашем проекте такие поля идут как строки и анализируются на стороне сервера, поэтому такое решение нас вполне устраивает.
Второй: можно прочитать время в «сыром» формате, например, так:
Наконец, если вам необходимо получить время в unix-формате (в секундах от начала cуток), используйте:
Желающим протестировать работу элемента добро пожаловать.
jQuery плагины форм для указания времени и даты
Не знаю, сколько сейчас на Ваших часах, но по моим самое время познакомиться с крутыми виджетами для указания времени, даты или и того и другого вместе. Конечно, таких виджетов на просторах сети хоть пруд пруди, но я ограничусь только теми, которые используют библиотеку jQuery.
Сразу хочу предупредить, что некоторые плагины написаны под западную 12-часовую систему.
Bootstrap 3 Datepicker
Лучший, как по мне, плагин для указания даты и времени чего-либо. Работает с нашим форматом даты и времени. Имеет множество плюшек и является очень гибким. Мы используем именно этот плагин в своих проектах.
Bootstrap Material Datetimepicker
Пусть вас не вводит в заблуждение присутствие Bootstrap в названии виджета — для его работы Bootstrap уже не требуется, необходимо только наличие jQuery. Основной особенностью является, если так можно выразится, многоэтапность при указании времени. Сначала выбираются часы, потом циферблат меняется и выбираются минуты. Аналогично происходит и при выборе даты.
Есть поддержка календаря в котором неделя начинается с понедельника, а это значит, что плагин можно использовать для проектов рунета.
jQuery UI Timepicker
Созданный на базе существующего виджета jQuery. Этот плагин наследует его простоту, идеологию и соответствие используемой теме jQuery.
Работает с нашей, правильной, 24-часовой системой.
jquery.timepicker
Если вы приверженец минимализма, то этот виджет для вас. Прототипом, вероятно, послужил Google Calendar — jquery.timepicker делает ввод времени таким же простым и естественным.
jQueryTimeAutocomplete
jQueryTimeAutocomplete похож на упомянутый выше jquery.timepicker но, кроме возможности выбора времени из списка, имеет функцию автодополнения. Она понравится тем пользователям, которые не любят просматривать списки в поисках нужного элемента, а предпочитают набирать значения с клавиатуры.
jQuery Time Entry
Весьма оригинальный и удобный способ выбора значения в поле — кроме традиционного ввода с клавиатуры или нажатия на управляющие кнопки (справа от поля), изменять значения часов и минут можно при помощи колесика мыши.
Timeago
Timeago не является виджетом для ввода значений времени или даты, а позволяет выводить вместо конкретного значения даты или времени так называемые«неточные» значения (например «4 минуты назад» или «2 дня назад»). Как его применять и результат его работы можно посмотреть на домашней страничке плагина.
Wickedpicker
Такой же простой, но, на мой взгляд, более функциональный виджет. Он лучше подойдет в том случае, если вы хотите дать посетителю возможность указывать произвольное время, а не выбирать из предопределенного списка.
jQuery Timepicker
Несмотря на внешнее и функциональное сходство, этот плагин отличается от вышеупомянутого плагина jquery.timepicker. Он позволяет вводить как произвольное время, так и выбирать из списка, причем существуют опции, управляющие формированием списка — начальное и конечное время, интервал и т.п.
Элемент HTML <time>
Элемент <time> представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования <time> — Reddit:
Краткая история
Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.
Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.
Тэг и атрибут
<time> можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:
В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:
Именно атрибут datetime придаёт этому элементу его уникальные свойства. Он представляет в машинночитаемом виде любую дату, вермя или интервал, относящийся к тексту внутри тега. Так как он предназначен для компьютеров, его формат жестко определён.
В большинстве случаев текст, заключенный в тег, представляет то же самое время в удобочитаемом виде:
10 способов указания времени
Год и месяц
Очень просто: год идёт перед месяцем.
Год, затем месяц, затем день.
Дата без года
Только время
Часы, минуты, секунды. Секунды указывать необязательно. Доли секунды указываются с точностью до третьего знака.
Дата и время
Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.
Часовой пояс
Начинается с плюса или минуса. Двоеточие необязательно. Всемирное координированное время (UTC, +00:00) можно заменить заглавной «Z».
Местная дата и время
Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.
Год и неделя
Год, затем заглавная «W» и номер недели.
Только год
Временной интервал (первый способ)
«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.
Временной интервал (второй способ)
Недели, дни, минуты, секунды. Буквы могут быть в любом регистре, пробелы необязательны.
Примеры
Проблемы с форматирование datetime?
Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег <time> :
Поддержка в брузерах
В чём преимущества использования <time>?
Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:
Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать <time>16:00</time> как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.
Поисковики могут улучшать результаты выдачи. Например, недавно был сильный снегопад, я погуглил и обнаружил, что школа, в которую ходят мои дети, сегодня закрыта. Только когда из школы позвонили и спросили, почему мои дети не пришли, я обнаружил, что внизу страницы с новостью о закрытии школы написано мелким шрифтом: «Опубликовано 5 января 2008». Поисковики вполне могли бы располагать недавние события выше в выдаче.
Ещё одна полезная мелочь
А вот пример кода для Rails, который выводит время в этих трёх видах:
