HTML-ввод даты

HTML-элемент <input> с type="date" используется для создания поля выбора даты, позволяющего пользователям выбирать дату из интерфейса календаря. Эта функция упрощает процесс ввода даты и обеспечивает единообразие формата, делая его незаменимым инструментом для ввода данных в формах, требующих ввода даты.

Пример ввода даты в HTML

В отличие от обычного текстового ввода, <input type="date"> оптимизирован для выбора даты и предоставляет удобный интерфейс. Он поддерживает атрибуты для проверки и настройки, обеспечивая точный и содержательный ввод данных.

В этом уроке мы изучим синтаксис, атрибуты, стили и практическое применение Input Date.

1. Базовый синтаксис

Основной синтаксис для ввода даты HTML: 

<input type="date" name="birthday">

Здесь:

  • type="date" : Указывает, что входные данные представляют собой средство выбора даты.
  • name : Связывает входные данные с определенным именем для отправки данных формы.

2. Добавление метки для доступности

Для улучшения доступности рекомендуется добавлять описательную метку к полю ввода даты: 

<label for="birthday">Select your birthday:</label>
<input type="date" id="birthday" name="birthday">

Нажатие на метку фокусирует ввод данных, делая форму более удобной для пользователя.

3. Установка значений по умолчанию

Вы можете задать дату по умолчанию для входных данных с помощью атрибута value . Значение должно быть в формате YYYY-MM-DD . 

<input type="date" id="startdate" name="startdate" value="2024-01-01">

В этом примере значение по умолчанию — 1 января 2024 года. При загрузке страницы эта дата будет выбрана предварительно.

Установка значений по умолчанию для ввода даты

4. Установка минимальных и максимальных дат

Чтобы ограничить диапазон дат, который могут выбирать пользователи, используйте атрибуты min и max : 

<input type="date" id="appointment" name="appointment" min="2024-01-01" max="2024-12-31">

В этом примере пользователи могут выбирать только даты между 1 января 2024 года и 31 декабря 2024 года.

5. Проверка с обязательным атрибутом

Атрибут required гарантирует, что пользователи не смогут отправить форму, не выбрав дату: 

<input type="date" id="duedate" name="duedate" required>

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

<form>
  <label for="duedate">Due date:</label>
  <input type="date" id="duedate" name="duedate" required>
  <input type="submit" value="Submit">
</form>

Видео

6. Оформление поля ввода даты

Хотя внешний вид самого окна выбора даты контролируется браузером, вы можете стилизовать поле ввода с помощью CSS: 

<style>
  input[type="date"] {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
  }

  input[type="date"]:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px #4CAF50;
  }
</style>

<label for="datefield">Pick a date:</label>
<input type="date" id="datefield">

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

Оформление поля даты в HTML с помощью CSS

7 Использование JavaScript с вводом даты

JavaScript можно использовать для динамического взаимодействия с полем даты. Например, можно установить минимальную дату на основе текущей: 

<input type="date" id="dynamicDate" name="dynamicDate">

<script>
  const today = new Date().toISOString().split('T')[0];
  document.getElementById('dynamicDate').setAttribute('min', today);
</script>

Этот скрипт устанавливает минимальную доступную для выбора дату на текущую дату, не позволяя пользователям выбирать прошедшие даты.

8 вопросов доступности при вводе даты

Чтобы обеспечить доступность введенных вами дат:

  • Создавайте понятные и описательные метки, используя элемент <label> .
  • При необходимости используйте атрибуты aria-label или aria-describedby для дополнительных инструкций.
  • Обеспечьте достаточный цветовой контраст текста и границ.

9 реальных вариантов использования ввода даты

  • Системы бронирования: позволяют пользователям выбирать даты для бронирования или записи на прием.
  • Регистрация на мероприятие: соберите даты мероприятий для планирования.
  • Управление сроками: используйте вводимые даты для задач или сроков выполнения проектов.

Заключение

HTML-элемент <input type="date"> — мощный инструмент для создания удобных и доступных форм. Используя его атрибуты и интегрируя с JavaScript, вы можете создавать интерактивные и эффективные поля ввода даты для различных приложений.