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

Доступно для тарифов: Бесплатный Базовый Полный

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

<script>
document.addEventListener("EasyNetShopModalOpened", function(event) {
  if (ens_jQuery('.easynetshop-modal-cart').css('display') != 'none') 
  {
      ens_jQuery('.fields_number input[name="Дата доставки"]').attr('type', 'date'); 
  }    
}, false);
</script>

Результат:

Подробнее:

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

document.addEventListener("EasyNetShopModalOpened", function(event) {
...
}, false);

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

if (ens_jQuery('.easynetshop-modal-cart').css('display') != 'none') 
  {
      ens_jQuery('.fields_number input[name="Дата доставки"]').attr('type', 'date'); 
  }

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

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

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

HTML - ползунок

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

if (ens_jQuery('.easynetshop-modal-cart').css('display') != 'none') 
  {
        ens_jQuery('.fields_number input[name="Количество"]').attr('type', 'range'); 
        ens_jQuery('.fields_number input[name="Количество"]').attr('min', '10'); 
        ens_jQuery('.fields_number input[name="Количество"]').attr('max', '100'); 
  }

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

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