Корректное получение даты и времени в JavaScript: getDay и getMonth

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для получения текущей даты и времени создайте экземпляр объекта Date при помощи new Date(). Вот код-пример:

JS
Скопировать код
const now = new Date();
console.log(now); // Готово! В консоли выведется текущая дата и время.

Если требуется представить дату в локализованном или формате ISO, примените методы now.toLocaleString() и now.toISOString() для конвертации даты в строку нужного формата.

Кинга Идем в IT: пошаговый план для смены профессии

Извлечение компонентов даты методами get

Методы now.getDate() и now.getMonth() позволяют получить отдельные данные. .getDate() возвращает день месяца, а .getMonth() — номер месяца начиная с нуля (поэтому к результату всегда нужно присоединить 1).

Особенности индексации месяцев и правил форматирования

Остерегайтесь – индексы месяцев начинаются с нуля

В JavaScript отсчёт месяцев идёт с нуля. Поэтому, чтобы получить "обычный" номер месяца, следует увеличить значение на единицу:

JS
Скопировать код
const month = now.getMonth() + 1; // Так, январь будет 1, а не 0. Сюрприз!

Форматирование однозначных чисел с ведущими нулями

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

JS
Скопировать код
function padTo2Digits(num) {
  return num.toString().padStart(2, '0'); // Преобразует 9 в 09, а 10 оставит без изменений
}

Упрощённая работа с форматом MySQL в JavaScript

Эта функция полезна тогда, когда необходим формат даты и времени, соответствующий MySQL:

JS
Скопировать код
function toMySQLFormat(date) {
  /* Форматирует дату и время в формат "yyyy-mm-dd hh:mm:ss", который подходит для MySQL */
  return date.getFullYear() + '-' +
    padTo2Digits(date.getMonth() + 1) + '-' +
    padTo2Digits(date.getDate()) + ' ' +
    padTo2Digits(date.getHours()) + ':' +
    padTo2Digits(date.getMinutes()) + ':' +
    padTo2Digits(date.getSeconds());
}

Создание часов с обновлением по времени

С использованием функции setInterval() можно создать часы, которые будут обновлять время каждую секунду:

JS
Скопировать код
setInterval(() => {
  /* Аналогично реальной жизни, наблюдение за временем в JavaScript ровно столь же захватывающе. 
     Текущее время на веб-странице обновляется каждую секунду */
  document.getElementById('clock').innerText = new Date().toLocaleString();
}, 1000);

Визуализация

Работу с текущей датой и временем в JavaScript можно сравнить с мгновенным снимком в неопределённом ходе времени:

Markdown
Скопировать код
🏃‍♂️💨 -> 📸 -> 🕒 [Текущий момент]

Наш фотоаппарат делает снимок момента "сейчас":

JS
Скопировать код
let now = new Date(); // 📸 Щёлк! Момент зафиксирован!

В результате у нас появляется отметка времени, которая указывает на "сейчас":

Markdown
Скопировать код
Снимок 📸: [🗓️ Дата: **21.04.2023**, ⏰ Время: **14:45:30**]

Вот так легко и мы уже можем зафиксировать точное время до секунды при помощи объекта Date в JavaScript. 🎯

Расширение функциональности объекта Date при помощи прототипов

Создание собственных методов

Добавив методы к Date.prototype, вы сможете обеспечить всем экземплярам Date использование новых функций:

JS
Скопировать код
// Метод 'today' для экземпляров Date — не все успевают за быстрым течением времени!
Date.prototype.today = function() { 
  return `${this.getFullYear()}-${padTo2Digits(this.getMonth() + 1)}-${padTo2Digits(this.getDate())}`;
};
// Метод 'timeNow' для экземпляров Date — ничто не может быть более актуальным.
Date.prototype.timeNow = function() {
  return `${padTo2Digits(this.getHours())}:${padTo2Digits(this.getMinutes())}:${padTo2Digits(this.getSeconds())}`;
};

const now = new Date();
console.log(now.today()); // Выводит сегодняшнюю дату в формате ГГГГ-ММ-ДД
console.log(now.timeNow()); // Выводит текущее время в формате ЧЧ:ММ:СС

Локализация и настройка отображения

Методы toLocaleDateString() и toLocaleTimeString() позволяют установить локализацию и настроить формат даты и времени:

JS
Скопировать код
const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
console.log(now.toLocaleDateString('ru-RU', options)); // "Сегодня так в Америке – 21 апреля 2023 года"
console.log(now.toLocaleTimeString('ru-RU', options)); // "14:45:30 – Время для чая!"

Форматирование данных без лишних знаков пунктуации

Чтобы не допустить появление запятых в выводе функции toLocaleString(), можно использовать следующую функцию:

JS
Скопировать код
function toLocaleStringNoCommas(date) {
  return date.toLocaleString().replace(/,/g, ''); // Сегодня запятые не в тренде!
}

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

  1. Date – JavaScript | MDN — исчерпывающее руководство по объекту Date от Mozilla Developer Network.
  2. Справочник методов объекта Date в JavaScript — обзор и примеры использования методов объекта Date.
  3. Всё, что следует знать о датах в JavaScript | CSS-Tricks — полезные советы по работе с датами от CSS-Tricks.
  4. Как форматировать даты в JavaScript? — обсуждение на Stack Overflow о различных способах форматирования дат.
  5. Дата и время — подробное пособие о работе с датой и временем в JavaScript от JavaScript.Info.
  6. Moment.js | Официальный сайт — библиотека для работы с датами в JavaScript.
  7. Вам не нужен Momentjs — подборка альтернативных решений функциям moment.js на GitHub.
Свежие материалы