Как правильно форматировать дату в JavaScript? (формат ДД.ММ.ГГГГ и другие)

Правильное форматирование дат в JavaScript

Вы столкнулись с классической проблемой — в JavaScript нет встроенного метода для произвольного форматирования дат, а getMonth() возвращает месяцы от 0 (январь) до 11 (декабрь). Поэтому май (месяц 5) отображается как 4.

Вот три основных подхода к решению:

1. Ручное форматирование с помощью методов Date

Самый простой и понятный способ — написать свою функцию:

function formatDate(date, format = 'DD.MM.YYYY') {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // +1 так как месяцы с 0
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  switch (format) {
    case 'DD.MM.YYYY':
      return `${day}.${month}.${year}`;
    case 'YYYY-MM-DD':
      return `${year}-${month}-${day}`;
    case 'DD.MM.YYYY HH:mm:ss':
      return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
    default:
      return `${day}.${month}.${year}`;
  }
}

// Использование:
const now = new Date();
console.log(formatDate(now)); // "12.05.2023"
console.log(formatDate(now, 'YYYY-MM-DD')); // "2023-05-12"
console.log(formatDate(now, 'DD.MM.YYYY HH:mm:ss')); // "12.05.2023 14:30:05"

Важно: padStart(2, '0') добавляет ноль слева, если число меньше 10. А getMonth() + 1 исправляет нумерацию месяцев.

2. Использование Intl.DateTimeFormat (рекомендуется)

Это встроенный объект для локализованного форматирования дат:

const now = new Date();

// Русская локаль
const ruFormatter = new Intl.DateTimeFormat('ru-RU', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(ruFormatter.format(now)); // "12.05.2023, 14:30:05"

// Международный формат (ISO)
const isoFormatter = new Intl.DateTimeFormat('fr-CA', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(isoFormatter.format(now)); // "2023-05-12"

// Только дата без времени
const dateOnly = new Intl.DateTimeFormat('ru-RU', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric'
});
console.log(dateOnly.format(now)); // "12.05.2023"

3. Современный метод toLocaleDateString()

Более короткая запись того же самого:

const now = new Date();

// Русский формат
console.log(now.toLocaleDateString('ru-RU')); // "12.05.2023"

// С временем
console.log(now.toLocaleString('ru-RU')); // "12.05.2023, 14:30:05"

// Американский формат
console.log(now.toLocaleDateString('en-US')); // "5/12/2023"

// Кастомные опции
console.log(now.toLocaleDateString('ru-RU', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})); // "12 мая 2023 г."

Рекомендации

• Для простых проектов используйте ручное форматирование — оно прозрачно и не требует дополнительных знаний.
• Для серьёзных проектов с локализацией — Intl.DateTimeFormat или toLocaleDateString().
• Если нужно много работать с датами (сложение, вычитание, часовые пояса) — установите библиотеку date-fns или Luxon.

Пример с date-fns:

// npm install date-fns
import { format } from 'date-fns';

const now = new Date();
console.log(format(now, 'dd.MM.yyyy')); // "12.05.2023"
console.log(format(now, 'yyyy-MM-dd HH:mm:ss')); // "2023-05-12 14:30:05"

Главное — всегда помнить про getMonth() + 1 и использовать padStart() для ведущих нулей. Удачи в изучении JavaScript!

function formatDate(date, template) {
  const map = {
    'YYYY': date.getFullYear(),
    'YY': String(date.getFullYear()).slice(-2),
    'MM': String(date.getMonth() + 1).padStart(2, '0'),
    'M': date.getMonth() + 1,
    'DD': String(date.getDate()).padStart(2, '0'),
    'D': date.getDate(),
    'HH': String(date.getHours()).padStart(2, '0'),
    'H': date.getHours(),
    'mm': String(date.getMinutes()).padStart(2, '0'),
    'm': date.getMinutes(),
    'ss': String(date.getSeconds()).padStart(2, '0'),
    's': date.getSeconds()
  };

  return template.replace(/YYYY|YY|MM|M|DD|D|HH|H|mm|m|ss|s/g, match => map[match]);
}

// Использование:
const now = new Date();
console.log(formatDate(now, 'DD.MM.YYYY')); // "12.05.2023"
console.log(formatDate(now, 'YYYY-MM-DD HH:mm:ss')); // "2023-05-12 14:30:05"
console.log(formatDate(now, 'D/M/YY')); // "12/5/23" (без ведущих нулей)

console.log(new Date().toISOString()); // "2023-05-12T11:30:05.123Z"