Top-office11.ru

IT и мир ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html календарь выбор даты

Air Datepicker, легкий и красивый выбор даты

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

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

Введение

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

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

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

Что касается громоздкой разметки, то к ней добавляется еще и табличная верстка, к ячейкам которой без лишних проблем не добавить 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().

Читать еще:  Html table rows

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

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

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

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

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

Заключение

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

Простой JavaScript календарь выбора даты (datepicker)

Описание

Календарь выбора даты, также называемый datepicker, написан на JavaScript. Он полностью автономен, т.е. работает без jQuery или каких-либо дополнений, с легкость интегрируется в любой проект. Требования IE 10+

Достаточно подключить скрипт и стиль отображения:

Затем добавить в тег:

или вызвать для всех тегов с CSS классом .datepicker:

Скачать

Описание функций и их параметров

Общая функция xCal(object, delim, order)

Все передаваемые параметры необязательны.

Первый параметр object

В качестве первого параметра можно передавать объект или его ID: xCal(this) или xCal(‘date2’). При отсутствии каких-либо параметров календарь закрывается. Для получения текущей даты функцию можно вызвать со значением первого параметра равным двойке alert(xCal(2)). Пример.

Второй и третий параметр

Если в качестве второго параметра передается объект, то третий параметр игнорируется. Объект может содержать набор некоторых параметров из таблицы ниже. В ином случае устанавливаются необязательные параметры delim и order (см. описание этих параметров в таблице ниже).

Примеры использования функции xCal():

Таблица параметров календаря доступных для установки

ПараметрВозможные значенияЗначение по умолчаниюОписание
lang«en», «ru»«ru»Язык интерфейса. Возможно добавить необходимые языки в js файл по аналогии с имеющимися
classстрока«xcalend»Имя CSS класса для визуального оформления календаря
delimстрока«.»Разделитель между числами дня, месяца и года
order0 — ДД.ММ.ГГГГ,
1 — ГГГГ.ММ.ДД,
2 — ММ.ДД.ГГГГ
При значении равном единице используется обратный порядок ГГГГ.ММ.ДД, при значении равном двойке используется порядок на американский манер ММ.ДД.ГГГГ, в остальных случаях и по умолчанию ДД.ММ.ГГГГ
idстрокаотсутствуетУникальный ID календаря. При отсутствии используется название из class
autoOn0 — выключено,
1 — включено
1Автоматическое открытие календаря при наведении курсора на поле. Используется функцией xCal.all(). Для ручной установки необходимо в теге использовать onmouseenter=»xCal(this)»
autoOff0 — выключено,
1 — включено
1Автоматическое закрытие календаря при выходе курсора за его пределы
now0 — нет, 1 — да1Возможность установки текущей даты в один клик
set00 — нет, 1 — даВозможность установки значения «00.00.0000» в один клик, в соответствии с установленным значения порядка отображения
x0 — нет, 1 — да1Отображать кнопку «Закрыть»
hide0 — нет, 1 — да1Скрывать календарь после выбора даты
toстрока или элементdocument.bodyМесто размещения календаря.
Если этот параметр является строкой, то используется элемент с указанным ID
fnстрока или функцияотсутствуетВызов функции при выборе даты.
Если задано название функции в виде строки, то в функцию с таким названием передается выбранная дата в качестве единственного параметра.
Если тип этого параметра является функцией, то в нее передается два параметра: выбранная дата и объект со всеми текущими установленными параметрами указанными в данной справочной таблице.

Включение календаря для всех элементов одного класса. Функция xCal.all(className, delim, order)

Функция xCal.all(className, delim, order) предназначена для прикрепления календаря ко всем полям с CSS классом, указанном в первом параметре, className. Эта функция имеет такие же параметры как и у xCal(). Отличается только первым параметром, который должен быть именем CSS класса и является обязательным.

Пример использования функции xCal.all():

Установка умолчаний. Функция xCal.set(options)

Функция xCal.set(options) предназначена для установки значений по умолчанию.

Пример использования функции xCal.set():

Примеры использования

Пример 1

Дата выбрана. Кликните по полю с датой для вызова календаря:

Пример 2

Если поле пустое, то календарь предложит текущую дату. В этом примере также включено автоматическое открытие календаря при наведении курсора на поле:

Пример 3

Пример 4

Тоже самое, что и в предыдущем примере, но в обратном порядке и с разделителем тире:
Открыть календарь, Очистить поле, Текущая дата

Пример 5. Использование xCal.all()

В этом примере события назначаются для всех элементов с классом .datepicker:

Пример 6

Функцию можно применить к любому тегу. Последний результат всегда будет содержаться в xCal.value.
Нажмите ТУТ или ЗДЕСЬ и последний выбранный результат можно всегда посмотреть по этой ссылке.
А это результат только для «ТУТ«.

Читать еще:  Файл функция matlab

Пример 7. Использование xCal.set()

Можно динамически менять умолчания параметров. Для смены языка во всех приведенных примерах выше, кроме случаев, где явно указано в передаваемом параметре, нажмите на поле:

Пример 8. AJAX

Использование своих функций. Данный пример подходит для AJAX. Замените «alert» на свою функцию:

Получай Биткоины пассивно!
Заставь время работать на себя!

Самый простой, надежный и проверенный способ растущего пассивного дохода без вложений, затрат времени и изучения.

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

Верстка формы + скрипт выбора даты

На этом уроке, мы займемся версткой формы, пока без отправления данных на сервер. Кроме того, установим скрипт выбора даты, при онлайн бронировании.

Изучение макета

Перед нами фрагмент формы для бронирования из реального PSD макета, из которого нужно сделать HTML страницу с точно таким же стилевым оформлением.

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

  • В первом блоке — заголовок h2
  • Во втором input_contact – четыре текстовых поля для контактов
  • В третьем input_label – два текстовых поля с метками
  • В четвертом submit_button – кнопка Отправить

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

В атрибут placeholder закладывается подсказка, какую информацию, должен ввести пользователь

HTML структура

Забронировать визит

Написать HTML код, можно, просто глядя на макет, однако для написания CSS, необходимо детально погрузиться в Photoshop или Avocode.

CSS код

Задаем общие базовые стили для всех элементов. Обнуляем поля и отступы, убираем дефолтную обводку внутри полей и уберем влияние паддингов и маржинов на размеры элементов (border-box).

* <
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
>

Максимальная ширина формы, отступы от края браузера. Свойство auto, ставит форму посередине от правого и левого края браузера.

.booking_form <
max-width: 400px;
margin: 4rem auto;
>

Стилевое оформление для заголовка. Шрифт Roboto Condensed, находите на Google Font и выполняете их инструкции.

h2 <
font-family: ‘Roboto Condensed’;
font-size: 32px;
color: #313030;
padding-bottom: 30px;
>

Для того, чтобы во втором блоке, поля расположить в строку, подключаем flex-технологию. Свойство space-between, раскидает инпуты по краям формы, а свойство wrap, разрешит перенос полей на новую строку.

.booking_form .input_contact <
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
>

Для достижения лучшей кроссбраузерности, добавим вендорные префиксы, для flexbox c помощью сервиса.

Общие стили оформления, для вводимого текста для всех текстовых полей.

input[type=text] <
height: 30px;
border: 1px solid #f1f1f1;
padding: 0 13px;
font-family: ‘Open Sans’;
color: #737272;
font-size: 14px;
>

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

.booking_form .input_contact input[type=text] <
width: 190px;
margin-bottom: 15px;
>

.booking_form .input_label input[type=text] <
width: 320px;
margin-bottom: 15px;
>

В третьем блоке, label и input, расположим в строку.

.booking_form .input_label label <
display: flex;
justify-content: space-between;
flex-wrap: wrap;
>

Отдельно стилизуем, метки.

.booking_form .input_label span <
font-family: ‘Open Sans’;
color: #737272;
font-size: 14px;
line-height: 30px;
>

Текст у placeholder.

input::-webkit-input-placeholder,
input::-moz-input-placeholder <
font-family: ‘Open Sans’;
color: #737272;
font-size: 14px;
>

При установке курсора в текстовое поле, текст у placeholder, исчезает.

*:focus::-webkit-input-placeholder <
color: transparent;
>

*:focus::-ms-input-placeholder <
color: transparent;
>

Сместим кнопку к правому краю формы.

.booking_form .submit_button <
display: flex;
justify-content: flex-end;
>

Оформление для кнопки.

.booking_form input[type=submit] <
width: 120px;
height: 45px;
background: #607D8B;
color: #fff;
font-family: ‘Roboto Condensed’;
font-size: 20px;
margin-top: 20px;
border: none;
cursor: pointer;
>

Скрипт выбора даты jQuery UI

К текстовому полю, прикрутим идентификатор datepicker, при клике по которому появится календарь.

Подключим между тегами head, CSS файл библиотеки.

Перед закрывающим тегом body подключим обе библиотеки и инициализируем скрипт выбора даты datepicker.

Демонстрация примера

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Читать еще:  Язык си чтение из файла

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Верстка формы + скрипт выбора даты

    На этом уроке, мы займемся версткой формы, пока без отправления данных на сервер. Кроме того, установим скрипт выбора даты, при онлайн бронировании.

    Изучение макета

    Перед нами фрагмент формы для бронирования из реального PSD макета, из которого нужно сделать HTML страницу с точно таким же стилевым оформлением.

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

    • В первом блоке — заголовок h2
    • Во втором input_contact – четыре текстовых поля для контактов
    • В третьем input_label – два текстовых поля с метками
    • В четвертом submit_button – кнопка Отправить

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

    В атрибут placeholder закладывается подсказка, какую информацию, должен ввести пользователь

    HTML структура

    Забронировать визит

    Написать HTML код, можно, просто глядя на макет, однако для написания CSS, необходимо детально погрузиться в Photoshop или Avocode.

    CSS код

    Задаем общие базовые стили для всех элементов. Обнуляем поля и отступы, убираем дефолтную обводку внутри полей и уберем влияние паддингов и маржинов на размеры элементов (border-box).

    * <
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    >

    Максимальная ширина формы, отступы от края браузера. Свойство auto, ставит форму посередине от правого и левого края браузера.

    .booking_form <
    max-width: 400px;
    margin: 4rem auto;
    >

    Стилевое оформление для заголовка. Шрифт Roboto Condensed, находите на Google Font и выполняете их инструкции.

    h2 <
    font-family: ‘Roboto Condensed’;
    font-size: 32px;
    color: #313030;
    padding-bottom: 30px;
    >

    Для того, чтобы во втором блоке, поля расположить в строку, подключаем flex-технологию. Свойство space-between, раскидает инпуты по краям формы, а свойство wrap, разрешит перенос полей на новую строку.

    .booking_form .input_contact <
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    >

    Для достижения лучшей кроссбраузерности, добавим вендорные префиксы, для flexbox c помощью сервиса.

    Общие стили оформления, для вводимого текста для всех текстовых полей.

    input[type=text] <
    height: 30px;
    border: 1px solid #f1f1f1;
    padding: 0 13px;
    font-family: ‘Open Sans’;
    color: #737272;
    font-size: 14px;
    >

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

    .booking_form .input_contact input[type=text] <
    width: 190px;
    margin-bottom: 15px;
    >

    .booking_form .input_label input[type=text] <
    width: 320px;
    margin-bottom: 15px;
    >

    В третьем блоке, label и input, расположим в строку.

    .booking_form .input_label label <
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    >

    Отдельно стилизуем, метки.

    .booking_form .input_label span <
    font-family: ‘Open Sans’;
    color: #737272;
    font-size: 14px;
    line-height: 30px;
    >

    Текст у placeholder.

    input::-webkit-input-placeholder,
    input::-moz-input-placeholder <
    font-family: ‘Open Sans’;
    color: #737272;
    font-size: 14px;
    >

    При установке курсора в текстовое поле, текст у placeholder, исчезает.

    *:focus::-webkit-input-placeholder <
    color: transparent;
    >

    *:focus::-ms-input-placeholder <
    color: transparent;
    >

    Сместим кнопку к правому краю формы.

    .booking_form .submit_button <
    display: flex;
    justify-content: flex-end;
    >

    Оформление для кнопки.

    .booking_form input[type=submit] <
    width: 120px;
    height: 45px;
    background: #607D8B;
    color: #fff;
    font-family: ‘Roboto Condensed’;
    font-size: 20px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    >

    Скрипт выбора даты jQuery UI

    К текстовому полю, прикрутим идентификатор datepicker, при клике по которому появится календарь.

    Подключим между тегами head, CSS файл библиотеки.

    Перед закрывающим тегом body подключим обе библиотеки и инициализируем скрипт выбора даты datepicker.

    Демонстрация примера

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Adblock
    detector