Работа с датами: Date API, форматирование и вычисления

Что такое Date API и зачем он нужен?

Даты — основа многих приложений: от календарей до систем логирования. В JavaScript работа с датами строится вокруг объекта Date. Он позволяет:
- создавать текущую или конкретную дату,
- форматировать её в читаемый вид,
- выполнять вычисления (разница между датами, добавление дней и т.д.).

💡 Все даты в JavaScript хранятся как количество миллисекунд с 1 января 1970 года (Unix-эпоха). Это внутреннее представление, но методы Date преобразуют его в удобные форматы.


Создание дат

Используйте конструктор new Date(). Варианты создания:

// Текущая дата и время
const now = new Date();
console.log(now); // Sun May 19 2024 15:30:00 GMT+0300

// Конкретная дата (год, месяц, день)
const birthday = new Date(1995, 11, 17); // Месяцы нумеруются с 0 (0 — январь)
console.log(birthday); // Sun Dec 17 1995 00:00:00 GMT+0300

// Через строку в формате ISO
const meeting = new Date('2024-05-20T14:00:00');
console.log(meeting); // Mon May 20 2024 14:00:00 GMT+0300

📌 Особенности:
- Месяцы считаются с 0 (0 — январь, 11 — декабрь).
- Если не указать время, будет 00:00:00.


Получение компонентов даты

Date предоставляет методы для извлечения частей даты:

const date = new Date();

console.log(date.getFullYear());  // 2024 (год)
console.log(date.getMonth());     // 4 (май, т.к. нумерация с 0)
console.log(date.getDate());      // 19 (число месяца)
console.log(date.getDay());       // 0 (воскресенье, 0-6)
console.log(date.getHours());     // 15 (часы)
console.log(date.getMinutes());   // 30 (минуты)

⚠️ getYear() устарел (возвращает год минус 1900). Всегда используйте getFullYear()!

Для UTC-версий методов добавьте UTC:

console.log(date.getUTCHours());  // 12 (15:00 MSK = 12:00 UTC)

Форматирование дат

Стандартный toString() не всегда удобен. Вот альтернативы:

Вариант 1: toLocaleString()

const date = new Date();

console.log(date.toLocaleDateString());           // "19.05.2024"
console.log(date.toLocaleTimeString());           // "15:30:00"
console.log(date.toLocaleString('en-US'));        // "5/19/2024, 3:30:00 PM"

Можно настроить формат через параметры:

const options = { 
  weekday: 'long', 
  year: 'numeric', 
  month: 'long' 
};

console.log(date.toLocaleDateString('ru-RU', options)); 
// "воскресенье, 19 мая 2024 г."

Вариант 2: Библиотеки

Для сложного форматирования используют Intl.DateTimeFormat или библиотеки вроде date-fns/moment.js.


Вычисления с датами

Даты можно сравнивать и изменять, но есть нюансы.

Сравнение

const now = new Date();
const future = new Date(2025, 0, 1);

console.log(now < future);  // true (сравнение через миллисекунды)

Разница между датами

Используйте разницу в миллисекундах:

const start = new Date(2024, 0, 1);
const end = new Date(2024, 5, 1);

const diffMs = end - start;                     // Разница в миллисекундах
const diffDays = diffMs / (1000 * 60 * 60 * 24); // Перевод в дни

console.log(diffDays);  // 152 (дней между 1 января и 1 июня)

Изменение дат

Мутирование через методы:

const date = new Date();
date.setMonth(date.getMonth() + 3); // Добавить 3 месяца
console.log(date); // Август 2024

Создание новой даты (неизменяемый подход):

const date = new Date();
const newDate = new Date(date.getTime());
newDate.setDate(date.getDate() + 10); // +10 дней

Работа с временными зонами

По умолчанию Date использует локальную зону браузера. Для UTC:

const date = new Date();
console.log(date.toUTCString());  // "Sun, 19 May 2024 12:30:00 GMT"

📌 Для серьёзных временных операций используйте библиотеки (moment-timezone), так как стандартный Date не поддерживает названия зон.


Практические примеры

1. Таймер обратного отсчета

function getRemainingTime(targetDate) {
  const now = new Date();
  const diffMs = targetDate - now;

  const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

  return { days, hours };
}

const newYear = new Date(2025, 0, 1);
console.log(getRemainingTime(newYear)); // { days: 225, hours: 8 }

2. Форматирование длительности

function formatDuration(ms) {
  const seconds = Math.floor(ms / 1000) % 60;
  const minutes = Math.floor(ms / (1000 * 60)) % 60;
  return `${minutes}m ${seconds}s`;
}

console.log(formatDuration(125000)); // "2m 5s"

Итоги

  • 📅 Date — мощный, но неидеальный API. Для сложных задач подключайте библиотеки.
  • 🔢 Месяцы нумеруются с 0, дни недели — с 0 (воскресенье).
  • ⏳ Все даты внутри — миллисекунды с 1970 года.
  • 🌍 Учитывайте временные зоны при работе с серверными данными.

Теперь вы готовы к работе с датами в реальных проектах! 🚀

Скрыть рекламу навсегда

🌱 Индвидидулаьные занятия

Индивидуальные онлайн-занятия по программированию для детей и подростков

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

🚀 Записаться на занятие