поле для выбора времени

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 &lttime>

Элемент &lttime&gt представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования &lttime&gt — Reddit:

Краткая история

Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий &ltdata&gt. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.

Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.

Тэг и атрибут

&lttime&gt можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:

В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:

Именно атрибут datetime придаёт этому элементу его уникальные свойства. Он представляет в машинночитаемом виде любую дату, вермя или интервал, относящийся к тексту внутри тега. Так как он предназначен для компьютеров, его формат жестко определён.

В большинстве случаев текст, заключенный в тег, представляет то же самое время в удобочитаемом виде:

10 способов указания времени

Год и месяц

Очень просто: год идёт перед месяцем.

Год, затем месяц, затем день.

Дата без года

Только время

Часы, минуты, секунды. Секунды указывать необязательно. Доли секунды указываются с точностью до третьего знака.

Дата и время

Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.

Часовой пояс

Начинается с плюса или минуса. Двоеточие необязательно. Всемирное координированное время (UTC, +00:00) можно заменить заглавной «Z».

Местная дата и время

Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.

Год и неделя

Год, затем заглавная «W» и номер недели.

Только год

Временной интервал (первый способ)

«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.

Временной интервал (второй способ)

Недели, дни, минуты, секунды. Буквы могут быть в любом регистре, пробелы необязательны.

Примеры

Проблемы с форматирование datetime?

Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег &lttime&gt :

Поддержка в брузерах

В чём преимущества использования &lttime&gt?

Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:

Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать &lttime&gt16:00&lt/time&gt как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.

Поисковики могут улучшать результаты выдачи. Например, недавно был сильный снегопад, я погуглил и обнаружил, что школа, в которую ходят мои дети, сегодня закрыта. Только когда из школы позвонили и спросили, почему мои дети не пришли, я обнаружил, что внизу страницы с новостью о закрытии школы написано мелким шрифтом: «Опубликовано 5 января 2008». Поисковики вполне могли бы располагать недавние события выше в выдаче.

Ещё одна полезная мелочь

А вот пример кода для Rails, который выводит время в этих трёх видах:

Источник