Как сделать выбор даты в html

Как сделать выбор даты в html

Для работы с датами и временем в HTML5 предназначено несколько типов элементов input:

• datetime-local : устанавливает дату и время
• date : устанавливает дату
• month : устанавливает текущий месяц и год
• time : устанавливает время
• week : устанавливает текущую неделю

Например, используем поле для установки даты:

       
 
Имя: 





 
Дата рождения: 
 
Отправить 





 
   

И при вводе в поле для даты будет открываться календарик:

Правда, здесь надо отметить, что действие этого элемента зависит от браузера. В данном случае используется Google Chrome. В последних версиях Opera элемент не будет сильно отличаться. А вот в Microsoft Edge элемент будет выглядеть так:

Применение остальных элементов:

       
 
Неделя: 
 
Дата и время: 





 
Месяц: 
 
Время: 





 
Отправить 
 
   

При использовании этих элементов также надо учитывать, что Firefox поддерживает только элементы date и time , для остальных создаются обычные текстовые поля. А IE11 и вовсе не поддерживают эти элементы.

Выбор даты в календаре HTML в форме заказа

Корзина позволяет создавать множество произвольных полей, но тип полей поддерживается только в текстовом виде (строка). Рецепт, приведенный ниже, позволит изменить тип поля в форме заказа на поддерживаемый стандартами HTML5. Доступны форматы в виде: календаря, «ползунка», палитры и т.д. Для добавления календаря необходимо после кода подключения корзины разместить js код:

Запуск механизма происходит внутри блока, который вызывается в ответ на событие «EasyNetShopModalOpened» — отображение окна корзины

document.addEventListener("EasyNetShopModalOpened", function(event) < . >, false);

Если форма заказа видима — меняем атрибут type в значение date. Поле принимает свойства выпадающего календаря (если браузер данный тип поддерживает).

if (ens_jQuery('.easynetshop-modal-cart').css('display') != 'none')

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

[name="Дата доставки"]

Другие доступные типы полей:

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

if (ens_jQuery('.easynetshop-modal-cart').css('display') != 'none')

Также можете указывать и другие типы полей:

• color — Виджет для выбора цвета.
• date — Поле для выбора календарной даты.
• datetime — Указание даты и времени.
• datetime-local — Указание местной даты и времени.
• email — Для адресов электронной почты.
• number — Ввод чисел.
• range — Ползунок для выбора чисел в указанном диапазоне.
• search — Поле для поиска.
• tel — Для телефонных номеров.
• time — Для времени.
• url — Для веб-адресов.
• month — Выбор месяца.
• week — Выбор недели.

• Проект «Простой магазин» основан в 2016 году.
• Техническую поддержку осуществляет компании CodeClass.RU
• support@easynetshop.ru

Значение date

Тип date (от англ. «date» ‒ «дата») создаёт поле ввода даты.

Внешний вид

• ‒ поле ввода даты;
• ‒ наведение курсора;
• ‒ фокус;
• ‒ интерфейс выбора даты.

Примечание

• Дата, выбранная с помощью поля ввода даты, присваивается данному элементу в виде специального значения атрибута « value ».
• На сервер вместе с остальными данными формы отправляется только имя и значение поля ввода даты.

Поддержка браузерами

Спецификация

Верс.	Раздел
HTML
2.0	Input Field: INPUT
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT
5.0	4.10.5.1.7 Date state (type=date)
5.1	4.10.5.1.8. Date state (type=date)
XHTML
1.0	Extensible HyperText Markup Language
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete Автозаполнение значения поля ввода даты. autofocus Автоматческая фокусировка на поле ввода даты после полной загрузки страницы. disabled Блокировка поля ввода даты.

disabled=»disabled»

form Присоединение поля ввода даты к форме. list Создание списка рекомендованных вариантов вводимой даты.

max Указывает, верхний (максимальный) предел ввода даты.

Примечание: значение данного атрибута имеет формат « гггг-мм-дд ».

min Указывает, нижний (минимальный) предел ввода даты.

Примечание: значение данного атрибута имеет формат « гггг-мм-дд ».

name Присвоение уникального имени (идентификатора) полю ввода даты. readonly Указывает, что поле ввода даты доступно только для чтения (изменение/редактирование запрещено). required Указывает что поле ввода даты обязательно для заполнения. step Устанавливает интервал увеличения числового значения даты. (Интервал применяется к дням.) value Указывает значение даты (отправляется на сервер или используется скриптами).

value=»2015-05-09″

Примечание: значение данного атрибута имеет формат « гггг-мм-дд ».

Выпадающий список выбора даты : Datepicker

Создайте переключаемый выпадающий список выбора даты.

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

Чтобы создать указатель даты, просто добавьте атрибут data-uk-datepicker к элементу . У вас также есть возможность настроить формат даты. Просто добавьте параметр формата к атирбуту data-uk-datepicker .

Компонент DatePicker определяет, загружается ли JavaScript из компонента Form select. Это позволит вам быстро переключаться между годами и месяцами через «форму выбора» *select внутри datepicker .

Пример

Разметка

Пример (русский)

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-datepicker=""

Option	Possible value	Default	Description
weekstart	integer (0..6)	1	Начало недели
i18n	JSON object		Language string definitions
format	any combination of DD, MM and YYYY	‘YYYY-MM-DD’	Строка формата даты
offsettop	integer	5	Offset to the input value
minDate	bool (false to ignore the option) string (date as in format ) integer (offset in days from current date)	false	Мин. дата
maxDate	bool (false to ignore the option) string (date as in format ) integer (offset in days from current date)	false	Макс. дата
pos	‘auto’, ‘top’, ‘bottom’	‘auto’	Позиция datepicker

Init element manually

var datepicker = UIkit.datepicker(element, < /* options */ >);

Events

Name	Parameter	Description
show.uk.datepicker	event	On datepicker dropdown show
hide.uk.datepicker	event	On datepicker dropdown hide
update.uk.datepicker	event	On calendar rendering