календарь в форме обратной связи
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
Вывод на сайте календарей с двумя зависимыми датами
В предыдущей статье было рассказано о вводе даты с помощью выпадающего календаря, построенного с использованием библиотеки jQuery. В некоторых случаях необходимо выводить несколько календарей на одной странице, причем указание одной даты зависит от введенного значения другой. Это требуется, например, для указания сроков бронирования номера в гостинице, когда дата заезда не может быть позже даты выезда, а также при выборе дней вылета/прилета самолетов.
Действующий пример вывода такого календаря, в котором вторая дата не может быть ранее первой, показан внизу:
| Дата заезда: | Дата выезда: |
Для простой реализации такого вывода даты достаточно при установке календаря вставить в тег . следующий скрипт инициализации календаря:
Далее в HTML-коде вызова календарей необходимо указать id=»from» для первого и id=»to» для второго календаря. Для нашего примера это будет выглядеть так:
Дата заезда:
Дата выезда:
В нашем примере введены некоторые дополнительные параметры календаря, подробнее о которых смотрите в статье «Изменение стилей и настройки календаря»:
В заключение, необходимо отметить, что данный скрипт вывода зависимых дат работает как вперед, так и назад. То есть, если сначала вы ввели вторую дату (выезд), то не сможете ввести первую (приезд) с более поздним значением.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
Изменение стилей и настройки календаря в форме обратной связи
В предыдущей статье было рассказано о вводе даты в форме обратной связи с помощью выпадающего календаря. Внешний вид такого календаря можно самостоятельно изменять в CSS-файле, но лучше не изобретать велосипед, а воспользоваться готовыми образцами, предлагаемыми разработчиками. Для этого можно выбрать подходящий вариант из галереи на странице ThemeRoller jQuery (слева в меню). Затем надо скачать новые файлы, нажав Download под картинкой, и заменить ими старые файлы на вашем сайте, как рекомендовалось в предыдущей статье.
Правда, если вы не сильны в английском, то могут возникнуть небольшие трудности в работе. Поэтому предлагаю сделать проще.
Понятно, что для изменения стиля календаря надо заменить содержимое папки calendar (см. опять же, предыдущую статью). Для некоторых вариантов достаточно заменить только папку scripts/css, в которой находятся файл стилей СSS и папка images, на новую с параметрами выбранного вами дизайна календаря. Но лучше не рисковать, и поменять всё содержимое папки calendar.
Ниже показаны некоторые варианты оформления календаря. Кликнув по понравившемуся вам изображению, вы можете скачать соответствующий архив, а затем просто заменить целиком содержимое папки calendar, распаковав в неё новый скачанный архив. Каждый архив имеет такое же название, как и стиль календаря на сайте jQuery.
Если показанных вариантов вам не хватает, то, на мой взгляд, вы зажрались, господа.
Иногда требуется ввести ограничение на ввод в календаре даты назад или вперед, изменить первый день недели, вид анимации и другие настройки. Для этого достаточно заменить дополнительный java-скрипт, установленный нами при инициализации календаря (см. пункт 3 предыдущей статьи), на следующий:
Для внесения изменений в календарь выбираете строчку в соответствие с комментариями, вводите новое значение параметра и смотрите результат в браузере. Если вам не требуется изменять какой-то параметр из перечисленных, то можете просто убрать соответствующую строчку. При этом его значение будет установлено по умолчанию.
Подробнее о возможных вариантах вывода календаря с примерами смотрите в описании Datepicker.
Если вы хотите разместить на одной странице сайта несколько календарей, то указываете разные значения идентификатора для каждого из них. То есть, добавляете дополнительную строчку в скрипте, например, $(«# datepicker_1 «).datepicker() и указываете id=»datepicker_1″ для нового календаря. Естественно, вы можете для каждого календаря установить и свой стиль оформления.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
Календарь в форме обратной связи
Во многих формах обратной связи требуется ввод даты, например, даты заказа авиабилетов, бронирования номера в гостинице и т.п. Для этого обычно используется простая строчка
.
К сожалению, посетители по-разному могут ввести данные, что иногда создаёт путаницу. Для исключения этого можно немного доработать форму, например, сделав отдельные поля для числа/месяца/года:
Пример рабочий, исходный HTML-код не имеет каких-либо особенностей, и вы можете найти и посмотреть его на странице, нажав Ctrl+U.
Рассмотрим ввод даты в форму обратной связи с помощью виджета Datepicker jQuery UI. Два действующих примера его использования показаны внизу. Для ввода даты щелкаете в поле ввода и выбираете нужное число в выпадающем календаре, после чего оно автоматически вводится в форму. Второй пример отличается от первого раскрывающимися списками для выбора месяца и года, эффектом анимации и ограничением ввода даты: 2 дня назад и 8 месяцев +3 недели +1 день вперед (maxDate: «+8m +3w +1d»).
| Пример 1 Дата: | Пример 2 Дата: |
Сначала рассмотрим, как за несколько минут установить календарик (пример 1) на сайте, а затем более тщательно, для особо любопытных товарищей, разберемся в тонкостях изменения стилей и настроек календаря (пример 2). Кстати, стиль нашего календаря в библиотеке jQuery называется Sunny (Солнечный).
Установка выпадающего календаря jQuery
Итак, процесс установки календаря состоит из 4 шагов (подробно установка скриптов jQuery на сайт описана в статье «Создание фотогалереи jQuery», но читать этот материал необязательно):
На этом установка календаря закончена! Можете открыть страницу с формой обратной связи в браузере и полюбоваться на результат.
Важное замечание 1: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Настройка выпадающего календаря jQuery
Чтобы в календаре сделать выбор месяца и года из выпадающих списков, как в Примере 2 вверху, достаточно изменить false на true в двух строчках скрипта установки параметров календаря (см. пункт 3 выше по тексту):
changeMonth: true,
changeYear: true.
В этом же файле вы можете изменить падеж и написание с заглавной или прописной буквы названий месяцев и дней недели.
В заключение, не забывайте, что загрузка скриптов замедляет открытие страницы. При медленном соединении с интернетом это приводит к тому, что выполнение сценариев происходит не сразу, и пользователь некоторое время (до полной загрузки скрипта) не увидит выпадающего календаря.
Далее рассмотрим, как изменить стиль календаря, ввести ограничение диапазона ввода даты и изменить некоторые другие настройки. Это необходимо, чтобы нельзя было, например, заказать билеты на самолет на пять лет вперед или в кинотеатр на прошлый месяц.
Также рассмотрим вывод на странице сайта двух календарей с зависимым выбором даты. Это требуется, например, при указании сроков бронирования номера в гостинице, когда дата выезда не может быть раньше даты заезда, а также при выборе дней вылета/прилета самолетов и др.
Air Datepicker, легкий и красивый выбор даты
Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.
Результат работы можно посмотреть здесь: Air Datepicker.
Введение
Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:
Что касается громоздкой разметки, то к ней добавляется еще и табличная верстка, к ячейкам которой без лишних проблем не добавить position: relative;.
Ну и напоследок все же хочется, чтобы была возможность добавить небольшую анимацию, а из-за того, что многие популярные календари используют метод .show(), который задействует свойство display, плавные переходы (transition) добавлять трудоемко.
Разработка
Календарь я разделил на три части:
При наступлении каких-либо событий в теле или навигации, они сообщают об этом основной части, и календарь обновляет свое состояние в соответствии с этими событиями.
В этой задаче мне помогли getter’ы и setter’ы. Например, при изменении месяца просто присваивается новая отображаемая дата с измененным номером месяца, и внутри геттера вызывается метод перерисовки тела и навигации календаря. Несмотря на то, что можно было бы обойтись и без них, мне данный подход представляется более красивым. К примеру, вот так выглядит метод перехода к следующему месяцу, году или декаде, в зависимости от текущего вида:
В свою очередь внутри геттера происходит вызов отрисовки элементов календаря (упрощенно):
Точно так же происходит переход на другой вид, очень просто:
Формирование разметки
Основа для календаря выглядит следующим образом:
Без таблиц и намека на них. Ячейка является простым
Я не вижу особого смысла в разделении на ряды ячеек, так как это дополнительный ненужный элемент. Все даты идут друг за другом, у них задана относительная ширина, которая позволяет осуществлять переход на другую строку в нужный момент.
Вычисление общего количества дней в месяце
Чтобы сформировать корректный HTML, нужно знать сколько дней в месяце. Для этого используется небольшой трюк с передачей следующего месяца и нулевой даты (в Date() дата месяца начинается с единицы).
Формирование названий дней
Когда инициализируешь календарь, можно задавать день, с которого начинается неделя. Мне показалось интересным показать как можно сформировать разметку с названиями дней с помощью рекурсии:
Использование flexbox
Для позиционирования внутри календаря я использую flexbox. Он с легкостью позволяет отцентрировать контент внутри ячеек, будет по центру во всех браузерах (которые поддерживают эту технологию) и на разных ОС, в отличие от техники задания высоты и такого же междустрочного интервала.
Плюс он позволяет располагать элементы на равноудаленном расстоянии друг от друга всего одной строчкой:
Не нужно беспокоиться о разных значениях ширины, все будет рассчитываться автоматически.
Можно также упомянуть про кнопки «Сегодня» и «Очистить»:
Если их две, они занимают по 50% ото всей ширины, если одна, то она занимает всю ширину. Этого также можно достичь одной строкой:
Это означает, что элемент в случае необходимости может как увеличиваться в размерах, так и уменьшаться, но при этом размеры всех соседей будут одинаковые. Когда кнопка одна, она расширяется на всю ширину, когда две, они пропорционально уменьшаются и занимают по 50%, и т.д. Можно добавлять сколько угодно элементов, у всех них будут одинаковые размеры, и в сумме они будут занимать всю ширину родителя.
В итоге мы получаем легкость позиционирования контента как при использовании таблиц, но сохраняем при этом чистоту и валидность разметки.
Позиционирование
Позиция элемента задается двумя значениям:
Для того, чтобы добавить анимацию «подъезжания» к текстовому полю, я добавил вспомогательные классы, которые говорят с какой стороны нужно начинать анимацию. В данном случае этот класс выглядел бы как .-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 файл), но достаточно функциональным, по крайней мере для меня он свои задачи выполняет. Буду рад, если он или эта статья кому-нибудь поможет.
Поехали! Или немного о проектировании интерфейса выбора дат
Выбор дат (дальше, для простоты, буду употреблять слово календарь) на сайтах используют часто. Бронирование отелей, перелетов, автомобилей, покупка билетов. Настолько заезженная тема, что и писать о ней смысла, казалось бы, нет.
Но… не так давно, передо мной стояла задача спроектировать календарь выбора периодов. Диапазон выбора дат варьировался от 2-х дней до нескольких месяцев.
Целевая аудитория достаточно неоднородна: возраст от 35 до 60 лет, компьютерная грамотность от новичков до уверенных пользователей.
Задача: сделать максимально удобный формат выбора дат, понятный целевой аудитории.
Перед проектированием были изучены и протестированы конкуренты, прочитано несколько статей на заданную тему.
Хочу поделиться выводами и примерами, сделанными в результате работы. Для кого-то открытий не будет, а кто-то, надеюсь, найдет для себя новое и полезное.
Наличие кнопки “Готово” (Подтвердить, Выбрать, ОК …) в теле календаря
Люди не всегда приходят на сайт имея в голове четкие даты.
Они могут указывать период, размышлять, менять даты (начальную, конечную, весь период). Большинство сайтов скрывают календарь сразу же после выбора даты. www.booking.com, www.aeroflot.ru как пример. Такое поведение системы раздражало пользователей в ситуации, когда случайно была выбрана не та дата или еще не принято окончательное решение. “Нажал не туда” особенно актуально для людей старшего возраста, с плохим зрением, в условиях спешки или невозможности сосредоточиться. Основания для такого проектирования понятны — меньше кликов, меньше нагрузка.
Но мы не всегда знаем кто и как будет взаимодействовать с интерфейсом. В каких условиях он при этом будет находиться.
Для этой ситуации удобно решение Google Авиабилеты. Гуляй по датам в раздумьях сколько хочешь, календарь будет виден пока не кликнешь на кнопку “Готово”. Удобно, присутствует ощущение контроля и понимание работы интерфейса.
Выдача результатов поиска без лишних кликов
Такая функция хорошо реализована на сайте www.trivago.ru. Ввожу необходимые параметры, а результаты уже подгружаются.
Визуальное выделение начальной и конечной дат
Пользователи оставляли хорошие отзывы о наличии таких подсказок. Визуальное отличие начальной и конечной дат служили своеобразными якорями и облегчали работу с календарем.
На некоторых сайтах отсутствовали индикаторы текущих дат.
Не сказать, что эта роковая ошибка, которая сильно влияет на удобство взаимодействия, но 6 из 10 тестируемых заметили, что им очень не хватает такого индикатора, как своеобразного “якоря”, показывающего взаимосвязь между выбранной и текущей датами.
Понятно какие даты можно выбрать, а какие нельзя. Текущая дата не выделена
Ещё одно решение: недоступные даты не указаны в календаре. Текущая дата стоит первой, не оставляя сомнений откуда необходимо начинать поиск.
Визуально понятны текущая, доступные и недоступные даты
Возможность быстро сбросить выбранные даты
Полезно, если пользователь решил полностью изменить запрос. Для быстрой очистки некоторые пользователи обновляют страницу. А бывают ситуации, что пользователь выбрал даты, но обновил страницу случайно.
Если пользователь случайно обновится, он вряд ли будет в восторге от необходимости заполнять всё заново. Если же он обновился намеренно, то увидит сохранённые даты и начнет вбивать новые.
Для решения этих проблем можно разместить где-то на виду заметную ссылку «Сброс» или «Новый поиск» рядом с вводом даты.
Это позволит быстро очищать результаты поиска, при необходимости, и сохранять данные при случайном обновлении.
www.google.ru/flights
Предзаполненные поля
На некоторых тестируемых сайтах поле “Дата” было уже заполнено.
В некоторых случаях стояла только начальная дата, в некоторых — начальная и конечная. Такое поведение интерфейса вызывало недовольство тестируемых и сбивало с толку. Конечно, каждый случай необходимо рассматривать индивидуально.
Например, покупка ж/д или авиабилетов, бронировании гостиниц может проходить сильно заранее. Тогда текущая дата неуместна.
При бронировании билетов, например, в кинотеатр, такой подход может быть оправдан.
Ниже показаны примеры заранее заполненных полей. Удобно? Стоит подумать.
Пример три: www.rentalcars.com
Автоматическое заполнение даты “Обратно”
Еще одна часто встречающаяся “фишка” со знаком минус. При вводе даты “Туда”, дата “Обратно” подставляется автоматически. Как правило, это следующий день.
Такое поведение интерфейса также вызвало недовольство своей непредсказуемостью и излишней самостоятельностью.
Стоит все-таки подумать, в каких случаях помогать, а в каких дать людям сделать выбор самостоятельно.
Идеи на заметку:
Напоследок, неплохие идеи, которые не понадобились для разработки, но остались в копилке.
Указание стоимости сразу в календаре
При выборе дат туда/обратно рассчитывается общая стоимость полета. Отдельным цветом выделены самые дешевые перелеты. Удобно, если стоит задача найти самый дешевый вариант, либо сравнить цены.
Варианты отображения/переключения между месяцами
Когда необходимо показать сразу несколько месяцев, можно подсмотреть идеи и подумать о удобном решении.
Визуальное отделение выходных от будней
Самый простой вопрос: начинать неделю в понедельник или в воскресенье? Это зависит от предоставляемой услуги и целевой аудитории. Если клиенты чаще заказывают ваши услуги в выходные, выделите выходные и, возможно, праздничные дни.
Мини-шагомер для быстрых переходов
Для планирования коротких поездок и пр. Нет необходимости открывать календарь. Тут же можно показывать результаты поиска.
Следует помнить, что мини-степперы — хорошее улучшение при выборе дат, но не стоит заменять ими полноценный попап с календарем.
Что выбрать? Сначала изучить цель календаря и диапазоны ввода дат. Если даты уходят далеко в прошлое или в будущее (например, для бронирования отпуска), то попап с календарем — хороший вариант.
Если диапазон дат довольно короткий (менее шести недель — например, при бронировании медицинского приёма), обязательно подумать о добавлении мини-степпера для более быстрой настройки.
Собственно все. Как всегда, любые мнения принимаются, критика приветствуется, за дополнительные примеры хороших решений благодарности!