HTML-ввод Дата и время - Локальный

HTML-элемент <input> с type="datetime-local" позволяет пользователям выбирать дату и время без указания часового пояса. Этот тип ввода полезен для приложений, которым требуется ввод конкретной локальной даты и времени, например, для планирования мероприятий или настройки напоминаний.

В отличие от <input type="date"> , который позволяет выбирать только дату, и <input type="time"> , который позволяет выбирать только время, <input type="datetime-local"> объединяет дату и время в одном элементе управления.

В этом уроке по HTML мы изучим Input Datetime-Local, его синтаксис, атрибуты, стили и практическое применение с подробными примерами.

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

Основной синтаксис для ввода datetime-local:

Копировать<input type="datetime-local" name="appointment">

Здесь:

• type="datetime-local" : Указывает, что входные данные предназначены для выбора как даты, так и времени.
• name : Определяет имя поля ввода для отправки формы.

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

Использование элемента <label> улучшает доступность и предоставляет контекст для ввода:

Копировать<label for="meeting">Schedule a meeting:</label>
<input type="datetime-local" id="meeting" name="meeting">

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

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

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

Копировать<input type="datetime-local" id="start" name="start" value="2024-12-10T14:30">

В этом примере дата по умолчанию — 10 декабря 2024 года, а время по умолчанию — 14:30.

4 Установка минимальных и максимальных значений

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

Копировать<input type="datetime-local" id="event" name="event"
  min="2024-05-01T09:00"
  max="2024-12-31T18:00">

В этом примере выбор ограничивается датами и временем между 9:00 утра 1 января 2024 года и 18:00 вечера 31 декабря 2024 года.

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

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

Копировать<input type="datetime-local" id="deadline" name="deadline" required>

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

6. Стилизация ввода даты и времени в локальной среде

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

Копировать<style>
  input[type="datetime-local"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

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

<label for="appointment">Set appointment date and time:</label>
<input type="datetime-local" id="appointment" name="appointment">

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

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

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

Копировать<input type="datetime-local" id="now" name="now">

<script>
  const currentDate = new Date();
  const formattedDate = currentDate.toISOString().slice(0, 16);
  document.getElementById('now').setAttribute('min', formattedDate);
</script>

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

8. Вопросы доступности

Чтобы сделать входные данные datetime-local доступными:

• Используйте описательные метки, чтобы четко обозначить цель ввода.
• При необходимости укажите дополнительные инструкции, используя aria-describedby или текст-заполнитель.
• Убедитесь, что поле ввода можно фокусировать и использовать с помощью навигации с помощью клавиатуры.

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

• Планирование событий: позвольте пользователям устанавливать даты и время событий, не беспокоясь о часовых поясах.
• Запись на прием: дайте пользователям возможность выбирать местные даты и время для записи на прием.
• Сроки выполнения задач: соберите информацию о сроках выполнения проектов или задач.

Заключение

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