Работа с датами и временем с помощью Day.js

Day.js — это простой инструмент JavaScript для управления, отображения и проверки даты и времени в современных браузерах.

Day.js кажется очень мощной и удобной библиотекой с широким спектром возможностей настройки и расширения.

Day.js просто служит заменой Moment.js. Команда Moment.js объявила, что проект теперь является наследием и поддерживается.

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

Ниже приведен график, показывающий ежемесячные загрузки NPM Day.js.

Ниже приведен график, показывающий звезды Day.js, которые были добавлены на GitHub.

В этой статье мы покажем, как использовать его для возможной замены Moment.js.

Зачем заменять Moment.js?

Moment.js — это пакет JavaScript, который упрощает синтаксический анализ, проверку, манипулирование и отображение дат и времени в JavaScript.

Поскольку команда Moment.js выпустила уведомление об устаревании его использования, разработчики были вынуждены перейти на Day.js и другие предложенные библиотеки. Недостатки Moment.js перечислены ниже.

• Moment.js плохо работает с tree-shaking, потому что это приводит к большому размеру пакета и проблемам с производительностью.
• У Moment.js есть проблема, которая влияет на изменчивость.
• Однако из-за сложных API и большого размера пакета это может привести к значительному снижению производительности, если вы работаете над веб-приложением, требующим высокой производительности.

Преимущества Day.js

• С сопоставимым API Day.js призван стать простой заменой Moment.js. Day.js не является заменой; однако, если вы привыкли работать с API Moment и вам нужно быстро двигаться, подумайте об этом.
• Благодаря высокой производительности Day.js.
• Day.js легче, чем Moment.js, поскольку размер пакета Date.js составляет всего около 232 КБ. Самая последняя версия Day JS имеет размер 7 КБ (минифицированный) и 2 КБ (сжатый).
• Day.js может быть включен как файл JavaScript из CDN или локального файла в дополнение к поддержке импорта и запроса.

Однако есть один недостаток:

Поддержка Day.js в сообществе JavaScript.

Необходимость в постоянных обновлениях инструментов — вот что вызывает эту проблему у разработчиков. Любой веб-разработчик всегда будет стремиться к максимальной оптимизации для создания простых и быстрых приложений. Чтобы гарантировать высокую производительность программных продуктов и поддерживать их безопасность, мы должны регулярно обновлять наши библиотеки и фреймворки до самых последних версий.

Day.js — отличная замена Moment.js при сравнении размера и производительности.

Начиная

Найти CDN для Day.js очень просто, cdnjs.com предоставляет CDN Day.js для использования в нашем браузере. Ссылка CDN имеет тег скрипта, который можно добавить вверху или внизу нашего HTML-кода.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

С помощью Unpkg:

<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>

Чтобы установить день в узле js, запустите следующий код ниже.

npm i dayjs

Используйте приведенный ниже код, чтобы включить Day.js в качестве требования в проект Node.js:

const dayjs = require("dayjs");

Если вы используете Babel или ES6:

import Dayjs from "dayjs";

В этом руководстве мы отформатируем дату и время, используя Day.js CDN и простой JavaScript в браузере.

Обзор ИСО

Стандартным методом представления числовой календарной даты, устраняющим двусмысленность, является формат даты Международной организации по стандартизации (ISO). Вы можете использовать метод даты JavaScript, toISOString(), который возвращает только что сформированную дату в формате ISO, чтобы подтвердить это.

new Date().toISOString()
//Output:  2022-08-17T08:13:13.358Z

Чтобы узнать больше о датах JavaScript, пожалуйста, перейдите по этой ссылке.

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

Получите отформатированную дату, используя предоставленную строку токена. Имейте в виду, что текущая дата находится в формате ISO.

Когда мы запускаем Day.js в браузере, метод .format() возвращает строку в формате ISO. Это довольно похоже на метод конструктора даты toISOString() из ванильного JavaScript.

console.log(dayjs().format())
//Output: 2022-08-17T09:28:20+01:00

Поместите escape-символы в квадратные скобки (например, [ММ, ДД, ГГ]):

dayjs().format() // Output: 2022-08-17T09:31:09+01:00 
dayjs().format('MM') // Output: 08
dayjs().format('DD') // Output: 17
dayjs().format('YY') // Output: 22
dayjs().format('MMMM') // August

Кроме того, вы можете определить формат, в котором вы хотите, чтобы дата возвращалась

console.log(dayjs('2022-04-2').format('DD/MM/YYYY')) // Output: 02/04/2022

Приведенный ниже код выдаст ошибку, поскольку он использует неправильный формат даты:

console.log(dayjs('04-2022-2').format('YYYY/MM/DD'))  // Output: Invalid Date

Приведенный ниже код вернет дату в нужном формате, поэтому давайте проверим его. Всегда помните, что плагин необходим, если вам нужна дополнительная функциональность Day.js.

dayjs().format('a') // am

dayjs().format('A') // AM

// @ The offset from UTC, ±HHmm
dayjs().format('ZZ') // +0100

// @ The millisecond, 3-digits
dayjs().format('SSS') // 912

dayjs().format('h:mm A  ') // 8:28 AM  

dayjs().format('h:mm:ss A') // 8:30:51 AM 

dayjs().format('MM/DD/YYYY') // 08/19/2022

dayjs().format('M/D/YYYY') // 8/19/2022

dayjs().format('ddd, hA')
// Output:  "Fri, 8AM"

dayjs().format('MMM D, YYYY') 
// Aug 19, 2022

Мы также можем увидеть расширенное форматирование даты:

dayjs().format('ddd, MMM D, YYYY h:mm A ');
// @ Output: Fri, Aug 19, 2022 8:23 AM        

dayjs().format('MMM D, YYYY h:mm A');
// Aug 19, 2022 8:24 AM

dayjs().format('dddd, MMMM D YYYY, h:mm:ss A')
// Output:  "Friday, August 19 2022, 8:15:51 AM"

dayjs().format('dddd, MMMM Do YYYY, h:mm:ss A')
// output => "Friday, August 19o 2022, 8:15:51 AM"

Плагин RelativeTime

Прежде чем перейти к другим примерам, давайте обсудим плагин RelativeTime. Используя подключаемый модуль RelativeTime, вы можете преобразовать число даты и времени в относительное выражение, например 5 часов назад. Просто, верно?

Настройка браузера с компакт-диска: мы должны использовать CDN Relativetime, а затем настроить его с помощью Day.js, чтобы подключаемый модуль RelativeTime работал.

• Убедитесь, что CDN Day.js указан вверху.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"
    integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

• Во-вторых, вы должны использовать подключаемый модуль RelativeTime с CDN, который вы можете получить на cdnjs.com.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/relativeTime.min.js"></script>

• Плагин RelativeTime настраивается для Day. js

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime)    
</script>

Плагин RelativeTime для Node.js Require и импорта ES6

Плагин RelativeTime находится внутри пакетов Day.js при использовании npm i dayjs. Вам нужен только маршрут к RelativeTime внутри Day, чтобы использовать его.

• Нодей требует:

const dayjs = require('dayjs')
var relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)

• Импорт ES6

import Dayjs from "dayjs";
import relativeTIme from "dayjs/plugin/relativeTime";
Dayjs.extend(relativeTIme);

Повтор сеанса с открытым исходным кодом

OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Получение времени от X

Это дает строку, представляющую относительное время от X. Затем подключаемый модуль относительного времени позволит нам выполнить это.

Всегда проверяйте, что соответствующий плагин настроен с помощью файла dayjs.extend. Вы можете прочитать больше о плагине Day.js

dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a))
// Output: 2 years ago

Вы можете получить значение без суффикса, если передадите true.

dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a, true))
// Output: 2 years

Получение времени с этого момента

Это переводит строку относительного времени с текущего момента. Теперь требуется плагин RelativeTime.

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime);
    console.log(dayjs('2000-01-01').fromNow()) 
</script>

// Output: 23 years ago

Из будущего:

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime);
    console.log(dayjs('2050-01-01').fromNow()) 
</script>

// Output: in 27 years

Без суффикса: вы можете предоставить строку даты возврата с логическим значением true.

dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('2000-01-01').fromNow(true)  // Output: 23 years

Получение времени сейчас

Это возвращает строку, представляющую RelativeTime в настоящее время. Имейте в виду, что это зависит от плагина RelativeTime.

dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('1980-01-01').toNow() // Output: in 43 years

Отсутствует суффикс:

dayjs('1980-01-01').toNow(true) // Output: 43 years

Как создать временную метку Unix для даты

Это дает метку времени Unix объекта Day.js или количество секунд, прошедших с эпохи Unix. Объект временной метки Unix является встроенным объектом в Day js, поэтому для его использования не требуется плагин.

Без миллисекунд:

dayjs('2019-01-25').unix() // Output: 1548370800

С миллисекундами:

dayjs('2019-01-25').valueOf() // Output: 1548370800000

Согласно документации Day.js, всегда рекомендуется использовать Unix Timestamp.

Подсчет дней в месяце

Получить продолжительность текущего месяца в днях. Плагин не нужен.

dayjs('2020-02-04').daysInMonth() // Output: 29

Дата возврата как объект

Чтобы вернуть дату в формате объекта, вы должны использовать плагин toObject с CDN или потребовать его в импорте node.js или ES6.

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/toObject.min.js"
    integrity="sha512-qWOc7v2jfO5Zg34fVOIfnpvDopsqDBilo8Onabl/MHIr5idHpg73tVRUGDMVOQs2dUEsmayiagk75Ihjn6yanA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Node.js

var dayjs = require('dayjs')
var toObject = require('dayjs/plugin/toObject')
dayjs.extend(toObject)

Расширение CDN с помощью toObject()

<script>
    dayjs.extend(window.dayjs_plugin_toObject);
    dayjs('2020-01-25').toObject()
</script>

Выход:

{date: 25, hours: 0, milliseconds: 0, minutes: 0, months: 0, seconds: 0, years: 2020}

Возврат даты в виде массива

Чтобы вернуть дату в формате массива, вы должны использовать плагин ToArray с CDN или потребовать его в импорте node.js или ES6.

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/toArray.min.js" integrity="sha512-OMkxIxjYZNprkgSmg2ljMvDM2JhqrDxGI6XPwApLvTyS7MLi3uBWayWxt5RzmRSlxwYlfMUgC3Gd4Fycs3HNpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Node.js

var toArray = require('dayjs/plugin/toArray')
dayjs.extend(toArray)


Code example with a CDN:
javascript
dayjs.extend(window.dayjs_plugin_toArray);
dayjs('2022-08-04').toArray() // Output: [2022, 7, 4, 0, 0, 0, 0]

Получение времени и даты в формате JSON

Для сериализации как ISO 8601 в строке. Плагин не нужен.

dayjs('2019-06-25').toJSON() // Output: 2019-06-24T23:00:00.000Z
dayjs('1996-01-11').toJSON() // Output: 1996-01-10T23:00:00.000Z
dayjs('2025-05-10').toJSON() // Output: 2025-05-09T23:00:00.000Z

Укажите дату и время в виде строки.

Возвращает строку, содержащую представление даты. Плагин не требуется.

dayjs('2025-03-20').toString() // Output: Wed, 19 Mar 2025 23:00:00 GMT
dayjs('2010-08-08').toString() // Output: Sat, 07 Aug 2010 23:00:00 GMT
dayjs('01-2005-25').toString() // @ Error output: Invalid Date

Даты разбора

Объект Day.js является неизменяемым, что означает, что все операции API, изменяющие его каким-либо образом, будут создавать новый экземпляр объекта.

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

dayjs('2020-08-04T15:00:00.000Z')

Существующий собственный объект Date JavaScript можно использовать для создания объекта Day.js.

let d = new Date(2021, 02, 11);
let day = dayjs(); // The date returned by the first formatted date is copied in this line

Теперь с Parse: см. приведенный ниже код при использовании Parse для возврата текущей даты.

new Date(2021, 02, 11);
// Alternative
dayjs(new Date());

Проверка

Чтобы проверить правильность даты и времени, используйте метод .isValid() в Day.js. который дает логический результат,

dayjs('1996-05-01').isValid(); // Output: true
dayjs('dummy text').isValid(); // Output: false
dayjs('2005-06-09').isValid(); // Output: true

Часовой пояс

Day.js предлагает совместимость с часовыми поясами для областей, где соблюдается одно и то же стандартное время. Для использования часового пояса Day.js требуется плагин. Чтобы использовать Timezone в Day.js, нам нужны плагины Time Zone и UTC.

Node.js:

const dayjs = require('dayjs')
const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)

CDN для плагина UTC

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/utc.min.js"
    integrity="sha512-z84O912dDT9nKqvpBnl1tri5IN0j/OEgMzLN1GlkpKLMscs5ZHVu+G2CYtA6dkS0YnOGi3cODt3BOPnYc8Agjg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CDN для плагина часовых поясов

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/timezone.min.js"
    integrity="sha512-fG1tT/Wn/ZOyH6/Djm8HQBuqvztPQdK/vBgNFLx6DQVt3yYYDPN3bXnGZT4z4kAnURzGQwAnM3CspmhLJAD/5Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Расширение Day.js для часового пояса и плагин UTC:

<script>
    dayjs.extend(window.dayjs_plugin_utc)
    dayjs.extend(window.dayjs_plugin_timezone);
<script>

Пример кода:

dayjs.tz("2020-06-01 12:00", "America/Toronto")

Вывод на консоль:

let time = {
    $D: 18,
    $H: 11,
    $L: "en",
    $M: 10,
    $W: 1,
    $d: "Mon Nov 18 2013 11:55:00 GMT+0100 (West Africa Standard Time) {}",
    $m: 55,
    $ms: 0,
    $offset: -300,
    $s: 0,
    $x: {
        $localOffset: -60,
        $timezone: "America/Toronto"
    }
}

Подожди; мы еще не закончили. Вы можете использовать метод .toString(), включенный в Day.js, чтобы вернуть часовой пояс в виде простой строки.

dayjs.tz("2013-11-18 11:55", "America/Toronto").toString()
// Output: Mon, 18 Nov 2013 16:55:00 GMT

Разбор зоны

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

Node.js:

var customParseFormat = require('dayjs/plugin/customParseFormat')
dayjs.extend(customParseFormat)

dayjs('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z')
// Returns an instance containing '1969-05-02T18:02:03.000Z'

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/customParseFormat.min.js" integrity="sha512-FM59hRKwY7JfAluyciYEi3QahhG/wPBo6Yjv6SaPsh061nFDVSukJlpN+4Ow5zgNyuDKkP3deru35PHOEncwsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
dayjs.extend(window.dayjs_plugin_customParseFormat);
dayjs.tz("12-25-1995", "MM-DD-YYYY", "America/Toronto").toString()
//Mon, 25 Dec 1995 05:00:00 GMT

Преобразование в зону

Обновите смещение, переключите часовой пояс, а затем вернитесь к экземпляру объекта day.js. Когда второму параметру передается истинное значение, изменяется только часовой пояс (и смещение), а местное время остается постоянным.

<script>
    dayjs.extend(window.dayjs_plugin_utc)
    dayjs.extend(window.dayjs_plugin_timezone);
<script>

Оценка пользовательской зоны

Это автоматически предсказывает часовой пояс пользователя.

dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
dayjs.tz.guess()  //Asia/Calcutta

Настройка часового пояса по умолчанию

Установите предпочитаемый часовой пояс в качестве часового пояса по умолчанию вместо местного. В конкретном объекте dayjs можно настроить другой часовой пояс.

Node.js

var utc = require('dayjs/plugin/utc')
var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)

CDN

dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
dayjs.tz.setDefault("America/New_York") // Setting the default time
dayjs.tz("2019-08-05 11:00")

Заключение

Мы начали с понимания Day.js и преимуществ его использования для форматирования времени и дат. Day.js просто заменяет Moment.js. Несмотря на то, что Moment.js не требуется, Day.js предлагает все требования к форматированию даты, синтаксическому анализу, плагинам и локализации. Поэтому вы можете использовать dayjs.org, чтобы выбрать и найти дополнительную информацию на официальном сайте Day.js.

СОВЕТ ОТ РЕДАКТОРА. Чтобы узнать о возможной альтернативе обработки даты и времени в будущем, ознакомьтесь с нашей статьей Пришло ли время для JavaScript Temporal API? статья.

Первоначально опубликовано на https://blog.openreplay.com.