Техники получения текущей даты в JavaScript: от основ к мастерству

Для кого эта статья:

• Начинающие и опытные веб-разработчики, желающие улучшить свои навыки работы с датами в JavaScript.
• Студенты программирования, обучающиеся основам веб-разработки и JavaScript.

• Специалисты, разрабатывающие приложения, требующие точной обработки временных данных и манипуляций с датами.

  Управление датами в JavaScript — это фундаментальный навык, который превращает обычного кодера в настоящего повелителя времени в веб-разработке. От создания функциональных календарей до точной фиксации транзакций, умение виртуозно получать и манипулировать текущей датой открывает целый спектр возможностей для ваших приложений. Я подготовил арсенал техник от базовых конструкций до продвинутых библиотек, которые радикально упростят вашу работу с временными метками. 🕒

Если вы стремитесь стать экспертом в управлении датами на JavaScript, начните с основ на курсе Обучение веб-разработке от Skypro. Наша программа включает не только теоретические аспекты работы с Date API, но и практические задачи по созданию календарей, таймеров и систем учета времени. Вы научитесь превращать сложные временные вычисления в элегантные фрагменты кода, которые украсят ваше портфолио.

Основные методы получения текущей даты в JavaScript

JavaScript предлагает несколько подходов к получению текущей даты. Рассмотрим наиболее эффективные методы и их особенности для различных сценариев использования.

Самый распространённый способ — создание экземпляра объекта Date без аргументов:

const currentDate = new Date();
console.log(currentDate); // Выводит текущую дату и время

Этот код создаёт объект, содержащий текущую дату и время согласно системным настройкам устройства пользователя. Для получения отдельных компонентов даты используются специальные методы:

• getDate() — возвращает день месяца (1-31)
• getMonth() — возвращает месяц (0-11, где 0 — январь)
• getFullYear() — возвращает четырёхзначный год
• getHours() — возвращает часы (0-23)
• getMinutes() — возвращает минуты (0-59)
• getSeconds() — возвращает секунды (0-59)

Для более низкоуровневого подхода можно использовать статический метод Date.now():

const timestamp = Date.now();
console.log(timestamp); // Возвращает количество миллисекунд с 1 января 1970 года

Важно учитывать, что Date.now() возвращает числовое значение (UNIX-timestamp в миллисекундах), а не объект Date.

Александр Петров, Tech Lead

Однажды я столкнулся с критической ошибкой в продакшене из-за неправильной работы с датами. Наш сервис уведомлений должен был отправлять сообщения клиентам о предстоящих событиях за сутки. Но в определённые дни все уведомления уходили на месяц позже! Оказалось, что причиной был безобидный на первый взгляд код:

JS

Скопировать код

const tomorrow = new Date();
tomorrow.setDate(currentDate.getDate() + 1);

Баг проявлялся в последний день месяца. Когда мы прибавляли 1 к 31 мая, JavaScript автоматически переносил нас на 1 июля, а не на 1 июня как ожидалось. После глубокого изучения работы объекта Date, мы переписали логику с использованием временных меток:

JS

Скопировать код

const tomorrow = new Date(Date.now() + 24 * 60 * 60 * 1000);

Этот опыт научил меня никогда не недооценивать сложность работы с датами в JavaScript.

Объект Date и его возможности в работе со временем

Объект Date в JavaScript — это мощный инструмент для работы со временем, предоставляющий разнообразные методы для манипуляций с датами.

Создание объекта Date возможно несколькими способами:

// Текущая дата и время
const now = new Date();

// Конкретная дата (год, месяц [0-11], день, часы, минуты, секунды, миллисекунды)
const specificDate = new Date(2023, 11, 31, 23, 59, 59);

// Из timestamp (миллисекунды с 1 января 1970)
const fromTimestamp = new Date(1672531199000);

// Из строки в формате ISO
const fromISOString = new Date("2023-12-31T23:59:59");

Объект Date позволяет не только получать компоненты даты, но и модифицировать их с помощью методов set*:

• setFullYear() — устанавливает год
• setMonth() — устанавливает месяц (0-11)
• setDate() — устанавливает день месяца
• setHours(), setMinutes(), setSeconds() — устанавливают соответствующие компоненты времени

Для сравнения дат можно использовать стандартные операторы сравнения, так как при приведении к примитивам объекты Date преобразуются в timestamp:

const date1 = new Date(2023, 0, 1);
const date2 = new Date(2023, 5, 15);

console.log(date1 < date2); // true
console.log(date1 – date2); // разница в миллисекундах

Для работы с временными зонами объект Date предлагает следующие методы:

• getTimezoneOffset() — возвращает разницу между местным и UTC временем в минутах
• toUTCString() — возвращает строковое представление даты по UTC
• toISOString() — возвращает дату в формате ISO по UTC

Часто возникает необходимость добавить или вычесть определённый интервал времени. Для этого можно комбинировать методы get и set:

const date = new Date();
// Добавляем 7 дней
date.setDate(date.getDate() + 7);

// Добавляем 3 часа
date.setHours(date.getHours() + 3);

Форматирование даты в JavaScript разными способами

Стандартный вывод объекта Date редко соответствует требованиям дизайна интерфейса. Разберём методы форматирования даты для различных сценариев использования. 📅

Встроенные методы форматирования объекта Date:

const date = new Date();

// Локализованное представление даты
console.log(date.toLocaleDateString()); // 31.12.2023 (формат зависит от локали)

// Локализованное представление времени
console.log(date.toLocaleTimeString()); // 23:59:59 (формат зависит от локали)

// Локализованное представление даты и времени
console.log(date.toLocaleString()); // 31.12.2023, 23:59:59 (формат зависит от локали)

Методы toLocaleString, toLocaleDateString и toLocaleTimeString принимают два аргумента: локаль и объект опций, что позволяет гибко настраивать вывод:

const options = {
weekday: 'long', // 'narrow', 'short'
year: 'numeric', // '2-digit'
month: 'long', // 'narrow', 'short', 'numeric', '2-digit'
day: 'numeric', // '2-digit'
hour: '2-digit', // 'numeric'
minute: '2-digit', // 'numeric'
second: '2-digit', // 'numeric'
hour12: false // true для 12-часового формата
};

console.log(date.toLocaleString('ru-RU', options)); // воскресенье, 31 декабря 2023 г., 23:59:59

Для более сложных сценариев форматирования часто используют ручное построение строки даты:

function formatDate(date) {
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();

const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');

return `${day}.${month}.${year} ${hours}:${minutes}`;
}

console.log(formatDate(new Date())); // 31.12.2023 23:59

Метод padStart() позволяет гарантировать двузначный формат для компонентов даты, добавляя ведущие нули при необходимости.

Для отображения относительных дат (например, "5 минут назад", "вчера") можно использовать следующий подход:

function timeAgo(date) {
const seconds = Math.floor((new Date() – date) / 1000);

let interval = seconds / 31536000; // секунд в году
if (interval > 1) return Math.floor(interval) + " лет назад";

interval = seconds / 2592000; // секунд в месяце
if (interval > 1) return Math.floor(interval) + " месяцев назад";

interval = seconds / 86400; // секунд в дне
if (interval > 1) return Math.floor(interval) + " дней назад";
if (interval > 0.5) return "вчера";

interval = seconds / 3600; // секунд в часе
if (interval > 1) return Math.floor(interval) + " часов назад";

interval = seconds / 60; // секунд в минуте
if (interval > 1) return Math.floor(interval) + " минут назад";

return "только что";
}

console.log(timeAgo(new Date(Date.now() – 1800000))); // 30 минут назад

Максим Соколов, Front-end разработчик

Работая над системой бронирования для международной гостиничной сети, я получил неожиданный фидбек от клиентов из разных стран. Пользователи жаловались, что даты заезда и выезда отображаются в непривычных форматах. Американцы ожидали MM/DD/YYYY, европейцы — DD.MM.YYYY, а японцы — YYYY/MM/DD.

Изначально я использовал простое решение:

JS

Скопировать код

const checkInDate = `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;

Ошибка стала очевидной: я не учитывал культурные особенности восприятия дат. Решение пришло с использованием Intl.DateTimeFormat:

JS

Скопировать код

function formatDateForUser(date, locale) {
return new Intl.DateTimeFormat(locale, { 
year: 'numeric', 
month: '2-digit', 
day: '2-digit' 
}).format(date);
}

// Определяем локаль пользователя и форматируем дату
const userLocale = navigator.language || 'en-US';
const localizedDate = formatDateForUser(checkInDate, userLocale);

Этот подход не только решил проблему, но и значительно повысил удовлетворенность клиентов. С тех пор я всегда учитываю интернационализацию при работе с датами.

Популярные библиотеки для работы с датами

Хотя нативный объект Date в JavaScript предоставляет базовые возможности для работы с датами, многие разработчики предпочитают использовать специализированные библиотеки для более удобного и гибкого манипулирования временем. 🛠️

1. Day.js

Day.js — это минималистичная библиотека (всего 2 KB), представляющая собой современную альтернативу Moment.js:

// Подключение через npm: npm install dayjs

// Импорт
import dayjs from 'dayjs';

// Получение текущей даты
const now = dayjs();

// Форматирование
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2023-12-31 23:59:59

// Манипуляции
const nextWeek = now.add(1, 'week');
const lastMonth = now.subtract(1, 'month');

// Сравнения
const isBefore = now.isBefore(nextWeek); // true

Day.js имеет модульную структуру с плагинами, которые можно подключать по необходимости (например, для работы с относительным временем, временными зонами и т.д.).

2. date-fns

date-fns — функциональная библиотека с подходом в стиле lodash:

// Подключение: npm install date-fns

// Импорт только необходимых функций
import { format, addDays, differenceInDays } from 'date-fns';

// Текущая дата
const now = new Date();

// Форматирование
console.log(format(now, 'yyyy-MM-dd HH:mm:ss')); // 2023-12-31 23:59:59

// Манипуляции
const nextWeek = addDays(now, 7);

// Разница между датами
const daysDifference = differenceInDays(nextWeek, now); // 7

Преимущество date-fns в том, что вы импортируете только те функции, которые вам нужны, что оптимизирует размер бандла.

3. Luxon

Luxon — современная библиотека для работы с датами и временем, созданная одним из авторов Moment.js:

// Установка: npm install luxon

// Импорт
import { DateTime } from 'luxon';

// Текущая дата и время
const now = DateTime.local();

// Форматирование
console.log(now.toFormat('yyyy-MM-dd HH:mm:ss')); // 2023-12-31 23:59:59

// Манипуляции (immutable)
const nextWeek = now.plus({ weeks: 1 });
const lastMonth = now.minus({ months: 1 });

// Работа с временными зонами
const tokyoTime = now.setZone('Asia/Tokyo');

Luxon имеет встроенную поддержку временных зон, интервалов и продолжительностей.

4. Temporal API (будущий стандарт JavaScript)

Temporal API — это предложение для включения в стандарт JavaScript, предназначенное для замены устаревшего API Date:

// Обратите внимание: API находится в стадии разработки и может измениться
// Для использования сейчас требуется полифилл

const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // 2023-12-31T23:59:59

// Создание конкретной даты
const date = Temporal.PlainDate.from({ year: 2023, month: 12, day: 31 });

// Добавление времени
const inOneWeek = date.add({ days: 7 });

// Сравнение
const isBefore = date.compare(inOneWeek) < 0; // true

Temporal API исправляет многие недостатки текущего объекта Date и предлагает более интуитивный интерфейс для работы с датами.

• Критерии выбора библиотеки для работы с датами:
• Размер бандла и производительность
• Поддержка временных зон
• Иммутабельность операций
• Поддержка интернационализации
• Экосистема и сообщество

Решение типичных задач с текущей датой на JavaScript

Рассмотрим практические примеры решения распространенных задач, связанных с текущей датой в JavaScript. Эти шаблоны кода вы сможете сразу применить в своих проектах. ⚡

1. Определение первого и последнего дня текущего месяца

// Первый день текущего месяца
function getFirstDayOfMonth() {
const date = new Date();
return new Date(date.getFullYear(), date.getMonth(), 1);
}

// Последний день текущего месяца
function getLastDayOfMonth() {
const date = new Date();
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
}

console.log(getFirstDayOfMonth()); // 2023-12-01T00:00:00
console.log(getLastDayOfMonth()); // 2023-12-31T00:00:00

2. Вычисление разницы между двумя датами в днях

function getDaysDifference(date1, date2) {
// Преобразуем даты в миллисекунды
const time1 = date1.getTime();
const time2 = date2.getTime();

// Разница в миллисекундах
const diffTime = Math.abs(time2 – time1);

// Преобразуем в дни
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

return diffDays;
}

const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);

console.log(getDaysDifference(today, nextWeek)); // 7

3. Проверка, является ли дата рабочим днем

function isWeekday(date) {
const day = date.getDay();
return day !== 0 && day !== 6; // 0 – воскресенье, 6 – суббота
}

console.log(isWeekday(new Date())); // true или false в зависимости от дня недели

4. Добавление рабочих дней к дате (пропуская выходные)

function addBusinessDays(date, days) {
const result = new Date(date);
let addedDays = 0;

while (addedDays < days) {
result.setDate(result.getDate() + 1);
if (isWeekday(result)) {
addedDays++;
}
}

return result;
}

const startDate = new Date(2023, 11, 29); // Пятница, 29 декабря 2023
const newDate = addBusinessDays(startDate, 3);
console.log(newDate); // Среда, 3 января 2024

5. Создание простого countdown-таймера

function createCountdown(targetDate) {
function updateCountdown() {
const now = new Date();
const diff = targetDate – now;

if (diff <= 0) {
clearInterval(timer);
console.log('Время истекло!');
return;
}

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

console.log(`${days}d ${hours}h ${minutes}m ${seconds}s`);
}

updateCountdown(); // Первый вызов
const timer = setInterval(updateCountdown, 1000);

return {
stop: () => clearInterval(timer)
};
}

const newYear = new Date(2024, 0, 1, 0, 0, 0);
const countdown = createCountdown(newYear);
// Для остановки: countdown.stop();

6. Группировка массива объектов по дате

function groupByDate(items, dateField, formatFn = date => date.toISOString().split('T')[0]) {
return items.reduce((groups, item) => {
const date = item[dateField];
const formattedDate = formatFn(new Date(date));

if (!groups[formattedDate]) {
groups[formattedDate] = [];
}

groups[formattedDate].push(item);
return groups;
}, {});
}

const transactions = [
{ id: 1, date: '2023-12-25T10:30:00', amount: 125 },
{ id: 2, date: '2023-12-27T15:45:00', amount: 240 },
{ id: 3, date: '2023-12-25T18:20:00', amount: 75 }
];

const groupedTransactions = groupByDate(transactions, 'date');
console.log(groupedTransactions);
// {
// '2023-12-25': [
// { id: 1, date: '2023-12-25T10:30:00', amount: 125 },
// { id: 3, date: '2023-12-25T18:20:00', amount: 75 }
// ],
// '2023-12-27': [
// { id: 2, date: '2023-12-27T15:45:00', amount: 240 }
// ]
// }

7. Определение возраста по дате рождения

function calculateAge(birthDate) {
const today = new Date();
const birth = new Date(birthDate);

let age = today.getFullYear() – birth.getFullYear();
const monthDifference = today.getMonth() – birth.getMonth();

// Если текущий месяц раньше месяца рождения или текущий месяц тот же, но текущий день раньше дня рождения
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birth.getDate())) {
age--;
}

return age;
}

console.log(calculateAge('1990-05-15')); // Возраст на текущую дату

Эти решения демонстрируют гибкость JavaScript при работе с датами и временем. При использовании этих шаблонов в реальных проектах рекомендуется адаптировать их под конкретные требования и учитывать особенности вашего приложения.

Работа с датами в JavaScript — это одновременно и базовый, и сложный аспект разработки. Мы рассмотрели ключевые методы получения текущей даты, возможности объекта Date, различные подходы к форматированию, популярные библиотеки и решения для типичных задач. Вооружившись этими знаниями, вы можете создавать приложения, которые элегантно и корректно управляют временем. Помните: выбор правильного инструмента — половина успеха в работе с временными данными, будь то нативное API или специализированная библиотека.