календарь в форме html

Календарь

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

На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 22.12.2014, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь пока только Opera, выводя виджет для выбора любой даты (рис. 1).

Рис. 1. Календарь в браузере Opera

Браузер Chrome также поддерживает календарь, но делает это весьма скупо (рис. 2). По сути вы только можете прокручивать дату или вводить её как текст.

Рис. 2. Календарь в Chrome

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

Пример 1. Календарь

HTML5 IE Cr Op Sa Fx

Пример 2. Ограничение даты

HTML5 IE Cr Op Sa Fx

Текущая дата заданная через атрибут value подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 3).

Рис. 3. Календарь с диапазоном ввода

Кроме традиционного календаря, в котором можно выбрать дату, месяц и год, существует и календарь только для ввода месяца и недели. Они записываются в таком виде.

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

Рис. 4. Выбор месяца в Opera

На сервер данные поля type=»month» пересылаются как ГГГГ-ММ, например, 2014-10.

Похожим образом выглядит и виджет для выбора недели (рис. 5), но дополнительно выводится номер недели и выбрать можно только её. На сервер при этом значение отправляется как 2014-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.

Рис. 5. Выбор недели в Opera

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

Источник

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 файл), но достаточно функциональным, по крайней мере для меня он свои задачи выполняет. Буду рад, если он или эта статья кому-нибудь поможет.

Источник

Календарь для поля input формы

Дата публикации: 2016-10-19

От автора: приветствую вас, друзья. Из этой статьи вы узнаете, как прикрутить календарь для поля input формы Bootstrap. Поскольку мы будем использовать CSS фреймворк Bootstrap, воспользуемся уже готовым расширением для Bootstrap, чтобы добавить календарь. Приступим?

Исходные файлы текущей статьи вы можете скачать по ссылке.

В современных сайтах удобство пользователя — один из важнейших аспектов, которыми должен руководствоваться разработчик и владелец сайта. Каждый старается привлечь пользователя если не качественным контентом, так хотя бы какой-нибудь красивой и удобной фишкой. В идеале, конечно же, было бы желательно иметь обе вещи: и контент, и всевозможные красивости и удобства.

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

Начнем с того, что для поля даты мы можем использовать тип поля date, который нам предлагает HTML5.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

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

Описание

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

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

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

Скачать

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

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

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

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

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

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

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

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

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

Включение календаря для всех элементов одного класса. Функция 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()

Пример 6

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

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

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

Пример 8. AJAX

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

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

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

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

Источник

Календарь (выбор даты) в форме отправки с сайта

на почту соответсвенно все приходит так:
От кого: мое имя
Телефон: 123456789
Пользовались услугами: Да
E-mail клиента: klg@jj.ru
Выбранная услуга: Генеральная уборка квартиры/дома
Выбранный способ оплаты: Наличный расчет
Дополнения: g xdzg sdfg sdfsfdg sdf

Очень нужно добавить еще одно поле с календарем, чтоб можно было легко и непринужденно выбирать дату, на которую клиент хочет заказать услугу.
ну и чтоб это передавалось скрипту, и выводилось в отправленном сообщении.
календарь чтоб выглядел примерно вот так (это чтоб точно стало понятно, о чем прошу): http://ruseller.com/lessons/le. index.html

Выбор даты через календарь
Здравствуйте, можно ли, пожалуйста, сделать так, чтобы вылезал календарь на дате 01.01.2017, но.

Выбор даты или диапазона дат через календарь
Здравствуйте! Подскажите, как реализовать в запросе и в отчете диапазон даты и/или дату через.

Зачем нужен md5 в форме отправки сообщений с сайта
Взял готовую форму для отправки сообщений с сайта с прикреплением файла. Эта хоть сразу работает.

Реализовать в форме удобный выбор даты и времени
Доброго всем времени! Хочу реализовать в форме удобный выбор даты и времени. Есть несколько идей.

Решение

Здравствуйте.
Во-первых, хочу сказать спасибо. Это отличная форма, легко масштабируемая и простая.
Но есть у неё один недостаток. После отправки запроса, пользователь остаётся на странице mail.php, созерцать «Ваше сообщение успешно отправлено!» без автоматической переадресации и/или кликабельной ссылки для перехода обратно на сайт.
Как часть текста ссылку можно добавить, но при попытке сделать её кликабельной выдаёт ошибку.

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

Но хотелось бы всё же добавить кликабельную ссылку, на всякий случай. Так что вопрос всё ещё актуален.

Кроме того, я чуток доработал форму, добавив обязательные для заполнения поля с помощью «required», и «подсказки» для заполнения с помощью «placeholder». Делюсь, вдруг кому пригодиться:

Календарь с выбором даты
Добрый день! Есть обычный календарь на HTML, нужно нажав на дату сделать, чтобы она.

Календарь с выбором даты
Пытаюсь сделать так что бы при выборе определенной даты в календаре появлялась надпись, но надпись.

Календарь (цикличность от даты)
Доброго времени суток знатоки php! Вопрос который меня мучает. Есть php,css,jq календарь на.

Календарь с возможностью закрашивания текущей даты
Приветствую всех! Я тут читала на форуме и нашла файл календарь хотела спросить как можно сделать.

Календарь на PHP (передача даты в Javascript)
Есть такой код. Но дата в него попадает с компьютера пользователя. При неправильной установке даты.

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

Источник