Класс Date в JavaScript используется для работы с датами и временем. Он предоставляет множество методов для удобной работы с датами и временем, а также с возможностью получения и установки компонентов даты, таких как год, месяц, день, часы, минуты и секунды. В этой статье мы рассмотрим основные методы и свойства класса Date в JavaScript.

Создание экземпляра Date в JavaScript

Чтобы создать экземпляр класса Date, можно использовать один из следующих способов:

const now = new Date(); // текущая дата и время
const date = new Date('2023-03-12'); // дата из строки
const time = new Date(2023, 2, 12, 14, 30, 0); // год, месяц, день, часы, минуты, секунды

Методы и свойства Date в JavaScript

Свойства класса Date позволяют получать компоненты даты:

• getFullYear() - год (4 цифры)
• getMonth() - месяц (0-11)
• getDate() - день месяца (1-31)
• getDay() - день недели (0-6)
• getHours() - часы (0-23)
• getMinutes() - минуты (0-59)
• getSeconds() - секунды (0-59)
• getMilliseconds() - миллисекунды (0-999)
• getTime() - количество миллисекунд с 1 января 1970 года UTC

Примеры:

const date = new Date();
const day = date.getDate(); // возвращает текущий день месяца
const year = date.getFullYear(); // возвращает текущий год
const hour = date.getHours(); // возвращает текущий час
const time = date.getTime(); // возвращает количество миллисекунд

Класс Date предоставляет также множество методов для работы с датами и временем:

• toString() - возвращает строковое представление даты и времени
• toDateString() - возвращает строковое представление даты
• toTimeString() - возвращает строковое представление времени
• toLocaleString() - возвращает локализованную строку с датой и временем
• toLocaleDateString() - возвращает локализованную строку с датой
• toLocaleTimeString() - возвращает локализованную строку со временем
• toISOString() - возвращает строку в формате ISO 8601
• valueOf() - возвращает количество миллисекунд с 1 января 1970 года UTC
• getTimezoneOffset() - возвращает разницу в минутах между местным и стандартным временем
• setDate(day) - устанавливает день месяца (1-31)
• setFullYear(year, month, day) - устанавливает год (например, 2022), месяц (0-11) и день (1-31)
• setHours(hour, min, sec, ms) - устанавливает час (0-23), минуту (0-59), секунду (0-59) и миллисекунду (0-999)
• setMilliseconds(ms) - устанавливает миллисекунды (0-999)
• setMinutes(min, sec, ms) - устанавливает минуты (0-59), секунды (0-59) и миллисекунды (0-999)
• setMonth(month, day) - устанавливает месяц (0-11) и день (1-31)
• setSeconds(sec, ms) - устанавливает секунды (0-59) и миллисекунды (0-999)

Примеры:

const date = new Date();
date.setFullYear(2022, 3, 15); // устанавливает год 2022, месяц апрель (3), день 15
date.setHours(10, 30, 0, 0); // устанавливает время 10:30:00
date.setMilliseconds(500); // устанавливает 500 миллисекунд
date.setMonth(5, 10); // устанавливает месяц и день (июнь 10)
date.setSeconds(15, 250); // устанавливает секунды 15 и 250 миллисекунд

Получение текущей метки времени в JavaScript

Метод now() в классе Date в JavaScript возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC. Это время также называется "Эпохой Unix" и используется для определения точного момента времени во всем мире.

Метод now() не принимает никаких аргументов и возвращает текущее время на момент вызова в виде числа. Обычно результат метода now() используется для создания нового объекта Date:

const now = Date.now(); // текущее время в миллисекундах
console.log(now); // 1679122786889
const currentDate = new Date(now); //  // создание нового объекта Date
console.log(currentDate); // Mar 18 2023 09:59:38 GMT+0300 (Москва, стандартное время)

Метод now() также может использоваться для измерения производительности кода в JavaScript, путем сохранения времени до и после выполнения блока кода и нахождения разницы между ними:

const startTime = Date.now();

// Блок кода, который нужно измерить

const endTime = Date.now();
const timeDiff = endTime - startTime;
console.log(`Время выполнения блока кода: ${timeDiff} миллисекунд`);

Форматирование Date в JavaScript

Рассмотрим пример форматирования текущей даты на двух языках:

const currentDate = new Date();

const options = {
  hour: 'numeric', 
  minute: 'numeric', 
  second: 'numeric',
  timeZoneName: 'long'
}

console.log(currentDate.toLocaleDateString('ru-RU', options));
// 18.03.2023, 9:53:39 Москва, стандартное время

console.log(currentDate.toLocaleDateString('en-US', options));
// 3/18/2023, 9:53:39 AM Moscow Standard Time

Мы можем передать и уже прошедшие даты:

const currentDate = new Date('December 23, 2022 10:00:00');

const options = {
  hour: 'numeric', 
  minute: 'numeric', 
  second: 'numeric',
  timeZoneName: 'long'
}

console.log(currentDate.toLocaleDateString('ru-RU', options));
// 23.12.2022, 10:00:00 Москва, стандартное время

console.log(currentDate.toLocaleDateString('en-US', options));
// 12/23/2022, 10:00:00 AM Moscow Standard Time

Форматирование даты на React.js / Next.js с помощью Date

Класс Date в JavaScript может быть полезен при работе с метками времени на фронтенде. Давайте рассмотрим пример использования класса Date как хук в React с useEffect для обработки метки времени с бекенда на фронтенде.

Предположим, у нас есть REST API, которое возвращает метку времени в формате ISO 8601 (например, "2023-03-14T10:15:30Z"), и мы хотим отобразить эту дату на странице в удобном формате для пользователя.

Мы можем использовать класс Date в React-хуке useEffect для обработки этой метки времени и установки отформатированного значения в состояние компонента. Вот пример:

import React, { useState, useEffect } from 'react';

function App() {
  const [date, setDate] = useState('');

  useEffect(() => {
    const fetchDate = async () => {
      const response = await fetch('/api/date');
      const data = await response.json();
      const isoDate = data.date; // метка времени в формате ISO 8601
      const formattedDate = new Date(isoDate).toLocaleString('ru-RU', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      });
      setDate(formattedDate);
    };
    fetchDate();
  }, []);

  return (
    <div>
      <h1>Текущая дата и время:</h1>
      <p>{date}</p>
    </div>
  );
}

export default App;

Здесь мы используем хук useEffect, чтобы получить данные из нашего **REST API **и обработать метку времени, используя класс Date. Мы форматируем дату и время, используя метод toLocaleString(), который возвращает дату и время в удобном для пользователя формате.

Мы затем устанавливаем отформатированное значение в состояние компонента с помощью функции setDate(). Когда компонент рендерится, мы отображаем значение состояния компонента в разметке страницы.

Таким образом, использование класса Date в React-хуке useEffect позволяет нам легко обрабатывать метки времени на фронтенде и отображать их в удобном формате для пользователя.