Установка даты в поле input type date: JavaScript и jQuery

Быстрый ответ

Как установить дату в поле ввода посредством JavaScript? Используйте формат ГГГГ-ММ-ДД:

document.querySelector('input[type="date"]').value = "2023-04-01";

Для более точной адресации полю можно присвоить идентификатор:

<input type="date" id="dateInput">

document.getElementById('dateInput').value = "2023-04-01";

Такой подход обеспечит отличную совместимость в разных браузерах.

Эффект "Назад в будущее"

Если вы хотите установить текущую дату как значение по умолчанию, сначала получите её с помощью объекта Date:

const today = new Date();

После форматируйте полученную дату в формате ГГГГ-ММ-ДД:

const formattedDate = today.toISOString().substr(0, 10);
document.getElementById('dateInput').value = formattedDate;

Таким образом, на вашем веб-сайте появится возможность автоматической установки текущей даты.

Добавление финальных штрихов

Гарантирование лидирующих нулей для ММ и ДД

Чтобы дни и месяцы всегда отображались двузначными числами, воспользуйтесь методом padStart():

const month = (today.getMonth() + 1).toString().padStart(2, '0');
const day = today.getDate().toString().padStart(2, '0');
const year = today.getFullYear();
document.getElementById('dateInput').value = `${year}-${month}-${day}`;

Подробнее об этом расскажет наш спикер на видео

Согласование формата ISO с valueAsDate

toISOString конвертирует дату в формат ISO, а valueAsDate позволяет прямое присваивание даты объекту элемента ввода:

const dateElement = document.getElementById('dateInput');
dateElement.value = new Date().toISOString().split('T')[0];
dateElement.valueAsDate = new Date();

Борьба с "кайдзю" браузеров

Помните, что отображение <input type="date"> может различаться в разных браузерах. Будьте к этому готовы:

🕵️‍♀️ Проверяем: *Can I use...* 
🔬 Наука утверждает: метод `toISOString().substr(0, 10)` обычно работает без ошибок.

Визуализация

Давайте реализуем наш интуитивно понятный установщик дат:

<input type="date" id="datePicker">

Теперь определите цель:

🔐📅: [ММ-ДД-ГГГГ]

Каждый сегмент данных — как драгоценный камень:

💎 До: [🔴🔴🔴]
💎 После: [🟢🟢🟢]

Если задать значения (ММ, ДД, ГГГГ), установщик зафиксирует нужную дату:

document.getElementById('datePicker').valueAsDate = new Date();

Всего один клик — и установщик отобразит сегодняшнюю дату.

Пользователь начинает ввод — работа с пользовательскими вводами

Ограничение доступных дат для "путешественников во времени"

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

<input type="date" id="dateInput" min="2023-01-01" max="2023-12-31">

Отслеживание изменений даты

Вы можете отследить изменения даты пользователем:

document.getElementById('dateInput').addEventListener('change', (event) => {
  console.log('Дата изменилась:', event.target.value);
});

Корректировка ошибочных вводов даты

Если пользователь ввел некорректную дату, дайте ему об этом знать:

const dateInput = document.getElementById('dateInput');
dateInput.addEventListener('change', () => {
  if (isNaN(new Date(dateInput.value).getTime())) {
    alert('Указана неподходящая дата, попробуйте еще раз.');
    dateInput.value = new Date().toISOString().split('T')[0];
  }
});

Полезные материалы

1. <input type="date"> – HTML | MDN — всестороннее руководство от MDN по полям ввода даты.
2. HTML DOM Input Date value Property — обзор методов для работы с полем ввода даты под редакцией W3Schools.
3. How to set input type date's default value to today? – Stack Overflow — практические советы по установке дефолтной даты на странице от участников Stack Overflow.
4. HTML Standard — спецификация элементов ввода в HTML-стандартах.
5. Date and time | JavaScript.info — глубокое руководство по работе с датами в JavaScript.
6. Set date input field's max date to today – Stack Overflow — инструкция по ограничению датей в поле ввода даты от сегодняшней и её предшествующими датами.
7. Date and time input types | Can I use... Support tables for HTML5, CSS3, etc — сравнительные таблицы совместимости различных браузеров при вводе дат.