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

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

Календарь

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

На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 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
  • Переключатели
  • Флажки
  • Поле со списком
  • Скрытое поле
  • Поле с изображением
  • Загрузка файлов
  • Адрес электронной почты
  • Веб-адрес
  • Выбор цвета
  • Ввод чисел
  • Ползунок
  • Календарь
  • Поле для поиска
  • Номер телефона
  • Группирование элементов форм
  • Блокирование элементов форм
  • Автофокус
  • Подсказывающий текст
  • Защита от дурака

  Значение 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″

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

  Как сделать календарь в html и css

  Самый простой и быстрый способ как вывести готовый календарь на странице, является применение тега input с аттрибутом date . Давайте посмотрим на его возможности.

   type="date"> 

  Такой вариант создает поле на странице как на рисунке ниже, при нажатии на mm/dd/yyyy можно будет отредактировать значения, а при нажатии на иконку календаря — выбрать нужное.

  

   type="date" value="2023-01-01"> 

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

  

   type="date" value="2022-05-05" min="2022-01-01" max="2022-12-31"> 

  Тут мы задаем диапазон значение из которых можно выбрать дату, например чтобы пользователь не смог ошибиться при выборе даты. Как видно на примере ниже, выбрать месяц из 2021 года нет возможности

  Похожие публикации:

  1. Qbittorrent режим суперсида что это
  2. Где в ут 11 дата запрета редактирования
  3. Как писать интеграционные тесты
  4. Как сделать тень в канве