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

Календарь

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

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

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

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

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

Допустимо ограничить ввод даты заданным значением через атрибуты min и max , они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2017, то код запишется как в примере 2.

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

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

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

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

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

Рис. 3 Выбор месяца

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

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

Рис. 4. Выбор недели

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

Пример 3. Выбор месяца

Автор: Влад Мержевич
Последнее изменение: 05.08.2023

• Текст
• Фон
• Ссылки
• Списки
• Изображения
• Таблицы
• Формы
  • Отправка данных формы
  • Текстовое поле
  • Поле для ввода пароля
  • Многострочное текстовое поле
  • Кнопки
  • Элемент label
  • Переключатели
  • Флажки
  • Поле со списком
  • Скрытое поле
  • Поле с изображением
  • Загрузка файлов
  • Адрес электронной почты
  • Веб-адрес
  • Выбор цвета
  • Ввод чисел
  • Ползунок
  • Календарь
  • Поле для поиска
  • Номер телефона
  • Группирование элементов форм
  • Блокирование элементов форм
  • Автофокус
  • Подсказывающий текст
  • Защита от дурака

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

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

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

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

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

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

  

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

  

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

         
   
  Неделя: 
   
  Дата и время: 
   
  Месяц: 
   
  Время: 
   
  Отправить 
   
     

  

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

  Календарь

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

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

  

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

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

  

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

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

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

  HTML5 IE Cr Op Sa Fx

         
  Выберите дату: 

  Допустимо ограничить ввод даты заданным значением через атрибуты min и max , они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2012, то код запишется, как показано в примере 2.

  Пример 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 показано создание поля для ввода месяца.

  Пример 3. Выбор месяца

  HTML5 IE Cr Op Sa Fx

         
  Укажите месяц: 

  Выпадающий список выбора даты : 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

  Читать:

  1с ут где настраиваются счета учета