Форматирование и вставка текущей даты в 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 к проекту.

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

1. Date.prototype.toLocaleDateString() – JavaScript | MDN — Подробнее о методе toLocaleDateString.
2. <input type="date"> – HTML: HyperText Markup Language | MDN — Руководство по использованию типа ввода даты в HTML.
3. JavaScript Date Reference — Полный справочник по объекту Date в JavaScript.
4. How do I format a date in JavaScript? – Stack Overflow — Обсуждение форматирования даты на Stack Overflow.
5. Prefilling a Date Input | CSS-Tricks — Советы по настройке и предзаполнению даты в полях ввода.
6. Understanding Date and Time in JavaScript | DigitalOcean — Все о работе с датами и временем в JavaScript.
7. Moment.js | Docs — Документация по парсингу, проверке и форматированию дат с помощью Moment.js.