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