Форматирование и вставка текущей даты в input JS
Быстрый ответ
Для преобразования текущей даты в формат dd/mm/yyyy
и установки полученного значения в поле ввода используйте следующий код:
let today = new Date(),
dateFormatted = [today.getDate(), today.getMonth() + 1, today.getFullYear()]
.map(n => n < 10 ? '0' + n : '' + n).join('/');
document.querySelector('input').value = dateFormatted;
Подставьте вместо .querySelector
ваш селектор. В этом коде мы используем функцию map
для добавления ведущих нулей к однозначным числам.
Сохранение формата даты при отправлении формы
Чтобы сохранить формат даты dd/mm/yyyy
при каждой отправке формы, вы можете воспользоваться следующим решением:
document.querySelector('form').addEventListener('submit', function() {
let d = new Date(),
dateStr = [d.getDate(), d.getMonth() + 1, d.getFullYear()]
.map(n => n < 10 ? '0' + n : '' + n).join('/');
document.querySelector('input').value = dateStr;
});
Работа с однозначными днями и месяцами
Мы рассмотрели использование метода map
для форматирования даты. Есть и другой подход:
let d = new Date();
let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate(),
month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1;
document.querySelector('input').value = `${day}/${month}/${d.getFullYear()}`;
Обоснованное использование библиотек
Работа с датами упрощается при использовании библиотек, например, Moment.js. Но их использование может утяжелить ваш проект. Поэтому применяйте их тогда, когда реально требуется.
Визуализация
Посмотрим, как текущую дату можно преобразовать в формат dd/mm/yyyy
:
Текущая дата: 🗓️ "Чт, 20 апреля 2023"
Шаги:
- Извлечение года: 🍽️🔪 📅 =>
2023
- Извлечение месяца: 🍽️🔪🗓️ =>
04
- Извлечение дня: 🍽️🔪📆 =>
20
Таким образом, получаем отформатированную дату:
document.querySelector('input').value = '20/04/2023'; // Готово к подаче 🍲🍓🥝🍇
Дополнительные способы работы с объектом Date
Профессионализм программиста заключается в готовности адаптировать решения под разные задачи. Рассмотрим дополнительные способы:
Использование toLocaleDateString
Этот метод форматирует дату в соответствии с локалью и выбранными параметрами:
let options = { year: 'numeric', month: '2-digit', day: '2-digit' },
dateStr = new Date().toLocaleDateString('en-GB', options);
document.querySelector('input').value = dateStr;
Быстрое форматирование даты
Сократите код, использовав следующий сниппет (если ваша среда поддерживает ES5 и новее):
document.querySelector('input').value = new Date().toJSON().slice(0,10).split('-').reverse().join('/');
но помните о проблемах совместимости в старых браузерах.
Интеграция с jQuery и moment.js
Сочетание jQuery и moment.js упрощает форматирование:
$('input').val(moment().format('DD/MM/YYYY'));
Помните о необходимости подключения jQuery и moment.js к проекту.
Полезные материалы
- Date.prototype.toLocaleDateString() – JavaScript | MDN — Подробнее о методе toLocaleDateString.
- <input type="date"> – HTML: HyperText Markup Language | MDN — Руководство по использованию типа ввода даты в HTML.
- JavaScript Date Reference — Полный справочник по объекту Date в JavaScript.
- How do I format a date in JavaScript? – Stack Overflow — Обсуждение форматирования даты на Stack Overflow.
- Prefilling a Date Input | CSS-Tricks — Советы по настройке и предзаполнению даты в полях ввода.
- Understanding Date and Time in JavaScript | DigitalOcean — Все о работе с датами и временем в JavaScript.
- Moment.js | Docs — Документация по парсингу, проверке и форматированию дат с помощью Moment.js.