Выбрать дату и время

Выбрать дату и время

Наряду с календарём, предназначенном для указания даты, месяца или недели, иногда возникает необходимость вводить ещё и время, например, для точной публикации сообщения. Для подобных ситуаций используется поле datetime и datetime-local , синтаксис у них следующий.

Как и в случае с календарём пока поддержка этого поля имеется только в браузерах Opera (рис. 1) и Chrome (рис. 2). Атрибуты те же, что и для календаря.

Рис. 1. Вид поля для выбора даты и времени в Opera

Рис. 2. Ввод даты и времени в Chrome

Opera предоставляет удобный виджет сочетающий календарь и ввод времени, Chrome же ограничивается только полем, в котором можно прокручивать секунды или вводить текст вручную. Данные на сервер по умолчанию пересылаются в виде ГГГГ-ММ-ДДTчч:ммZ (например: 2015-09-25T12:15Z), где вначале указывается год, месяц и день, затем после латинской буквы T идут часы с минутами. В теории вместо Z указывается часовой пояс (например: +08:00 или -04:00), а также по желанию секунды с дробной частью, но на практике всё ограничивается только минутами и без часового пояса. Более того, при их наличии Chrome выводит сообщение «Недопустимые данные» и не отправляет введённый текст.

В примере 1 показано создание поля для ввода даты и времени.

Пример 1. Дата и время

HTML5 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6

Разница между значениями datetime и datetime-local заключается в добавлении часового пояса для datetime . На деле же пересылаются те же самые данные, только без Z в конце (2015-09-25T12:15).

Для ввода только времени без даты применяется , это поле также работает только в Opera и Chrome.

В примере 2 показано создание поля для ввода времени в указанном диапазоне.

Пример 2. Ввод времени

HTML5 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6

В данном примере значение изначально задано с помощью атрибута value , а минимальное и максимальное время установлено через min и max .

Не знаю, сколько сейчас на Ваших часах, но по моим самое время познакомиться с крутыми виджетами для указания времени, даты или и того и другого вместе. Конечно, таких виджетов на просторах сети хоть пруд пруди, но я ограничусь только теми, которые используют библиотеку 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. Он позволяет вводить как произвольное время, так и выбирать из списка, причем существуют опции, управляющие формированием списка — начальное и конечное время, интервал и т.п.

  • Пример
  • Скачать

Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.

Результат работы можно посмотреть здесь: Air Datepicker.

Введение

Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:

  1. передача объектов Date() в параметры вместо строк
  2. менее громоздкая разметка
  3. гибкое позиционирование элемента
  4. анимация при появлении

Сколько не приходилось работать с датой, почти всегда в исходных данных она хранилась в unix формате, и для меня остается загадкой, почему во многих плагинах при задании, к примеру, минимально возможной даты, нужно передавать строку: нужно получить дату, затем переделать ее в строку и уже потом передать плагину, вместо того, чтобы просто отдать new Date(time).

Читайте также:  Fhd телевизоры что это такое

Что касается громоздкой разметки, то к ней добавляется еще и табличная верстка, к ячейкам которой без лишних проблем не добавить position: relative;.

Ну и напоследок все же хочется, чтобы была возможность добавить небольшую анимацию, а из-за того, что многие популярные календари используют метод .show(), который задействует свойство display, плавные переходы (transition) добавлять трудоемко.

Разработка

Календарь я разделил на три части:

При наступлении каких-либо событий в теле или навигации, они сообщают об этом основной части, и календарь обновляет свое состояние в соответствии с этими событиями.

В этой задаче мне помогли getter’ы и setter’ы. Например, при изменении месяца просто присваивается новая отображаемая дата с измененным номером месяца, и внутри геттера вызывается метод перерисовки тела и навигации календаря. Несмотря на то, что можно было бы обойтись и без них, мне данный подход представляется более красивым. К примеру, вот так выглядит метод перехода к следующему месяцу, году или декаде, в зависимости от текущего вида:

В свою очередь внутри геттера происходит вызов отрисовки элементов календаря (упрощенно):

Точно так же происходит переход на другой вид, очень просто:

Формирование разметки

Основа для календаря выглядит следующим образом:

Без таблиц и намека на них. Ячейка является простым

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

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

Вычисление общего количества дней в месяце

Чтобы сформировать корректный HTML, нужно знать сколько дней в месяце. Для этого используется небольшой трюк с передачей следующего месяца и нулевой даты (в Date() дата месяца начинается с единицы).

Формирование названий дней

Когда инициализируешь календарь, можно задавать день, с которого начинается неделя. Мне показалось интересным показать как можно сформировать разметку с названиями дней с помощью рекурсии:

Использование flexbox

Для позиционирования внутри календаря я использую flexbox. Он с легкостью позволяет отцентрировать контент внутри ячеек, будет по центру во всех браузерах (которые поддерживают эту технологию) и на разных ОС, в отличие от техники задания высоты и такого же междустрочного интервала.

Читайте также:  Вай фай роутер горит красная лампочка

Плюс он позволяет располагать элементы на равноудаленном расстоянии друг от друга всего одной строчкой:

Не нужно беспокоиться о разных значениях ширины, все будет рассчитываться автоматически.

Можно также упомянуть про кнопки «Сегодня» и «Очистить»:

Если их две, они занимают по 50% ото всей ширины, если одна, то она занимает всю ширину. Этого также можно достичь одной строкой:

Это означает, что элемент в случае необходимости может как увеличиваться в размерах, так и уменьшаться, но при этом размеры всех соседей будут одинаковые. Когда кнопка одна, она расширяется на всю ширину, когда две, они пропорционально уменьшаются и занимают по 50%, и т.д. Можно добавлять сколько угодно элементов, у всех них будут одинаковые размеры, и в сумме они будут занимать всю ширину родителя.

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

Позиционирование

Позиция элемента задается двумя значениям:

  1. сторона, с которой будет появляться календарь
  2. положение на этой стороне

Если нужно расположить календарь сверху справа, то значение будет выглядеть как:

Для того, чтобы добавить анимацию «подъезжания» к текстовому полю, я добавил вспомогательные классы, которые говорят с какой стороны нужно начинать анимацию. В данном случае этот класс выглядел бы как .-from-top-. За анимацию отвечают css transition и css transform. Это позволяет достичь плавности, а также добавлять кастомные переходы.

Что касается Date()

Как я упоминал вначале, мне не совсем понятны ситуации, когда вместо объекта даты нужно передавать строку. Возможно это удобно при автоматической инициализации, когда параметры нужно передавать через data атрибуты, но для меня все же удобнее просто передать new Date(). Тем более, что запись вида new Date(2015, 11, 17) не особо сложнее ‘2015-12-17’. Поэтому у меня во всех параметрах, где задается дата, необходимо передавать new Date().

Несколько слов об использовании

Мне нравится практика автоматической инициализации плагинов, поэтому для инициализации календаря к текстовому полю достаточно добавить класс ‘datepicker-here’ и все заработает.

Опции можно передать через data атрибуты.

Кастомизируемое содержимое ячейки

В Air Datepicker есть возможность полностью изменять содержимое ячеек. Это позволяет добавлять, например, названия событий или какой-то вспомогательный контент в ячейки. Для этого нужно использовать опцию onRenderCell():

Заключение

В итоге я могу сказать, что получил неплохой опыт, улучшил свои навыки работы с датой и написания документации. Календарь получился небольшим: всего 20kb (минифицированный js файл), но достаточно функциональным, по крайней мере для меня он свои задачи выполняет. Буду рад, если он или эта статья кому-нибудь поможет.

Ссылка на основную публикацию
Восстановление загрузчика windows 10 после установки ubuntu
Если после установки второй ОС, попыток воспользоваться свободным местом на скрытых разделах диска или их форматирования, в случае системных сбоев,...
Вакуумный аппарат для дома
Оглавление В этом обзоре мы рассмотрим вопросы, связанные с выбором бытового вакууматора — устройства для вакуумной упаковки продуктов. Мы разберемся,...
Варианты подключения телевизора без прокладки кабеля
Автор: Бызов Алексей, установщик приемного спутникового оборудования Неправильная разводка телевизионного кабеля в доме может не только поставить под угрозу саму...
Восстановление паролей для андроид
Установка пароля – это прекрасный способ обезопасить свое устройство. Однако порой случается так, что владелец может забыть пароль. Что же...
Adblock detector