Moment.js: Полное объяснение и практические примеры использования библиотеки дат

Информатек Диджитал » Идиомы » Moment.js: Полное объяснение и практические примеры использования библиотеки дат

Работа с датами и временем в JavaScript может быть настоящей проблемой для веб-разработчиков . К счастью, такие инструменты, как Moment.js, значительно упрощают этот процесс, делая намного проще все: от базового форматирования дат до сложных операций манипулирования и проверки. Если вы когда-либо испытывали трудности с правильным преобразованием, сравнением или отображением дат в своих проектах, Moment.js, вероятно, был одним из ваших лучших друзей, или, по крайней мере, вам стоит подумать о его использовании.

В этой статье я расскажу вам все, что нужно знать о Moment.js : от его основных функций и малоизвестных приемов до практических примеров и интеграции с другими библиотеками, включая понятное объяснение его синтаксиса и задач, которые вы можете с его помощью выполнить. Мы также рассмотрим его ограничения, последние обновления и альтернативы, если вы ищете что-то более современное.

Что такое Moment.js и почему он стал таким популярным?

Moment.js — это библиотека JavaScript, разработанная для упрощения работы с датами и временем . Она позволяет создавать, анализировать, изменять и отображать даты практически в любом формате, используя простой, но мощный синтаксис. На протяжении многих лет эта библиотека была основным решением сообщества для преодоления ограничений встроенного объекта Date() в JavaScript.

В основе Moment.js лежит объект `moment()` , который может создавать даты практически из любых допустимых входных данных: текстовых строк, объектов Date, временных меток или напрямую с помощью числовых аргументов. Это делает его чрезвычайно гибким и полезным в самых разных проектах, от небольших скриптов до корпоративных приложений, управляющих международными часовыми поясами или историческими записями.

Что же обеспечило ему такой успех? Надежность, простота использования и разнообразие сопутствующих инструментов и плагинов . Даже когда проект перешел в режим поддержки, Moment.js сохраняет большую пользовательскую базу и обширную документацию , укрепляя свои позиции как ведущее решение для работы с датами в JavaScript и Node.js.

Основные возможности и преимущества Moment.js

• Простой и интуитивно понятный APIОдно из главных преимуществ Moment.js — его понятный синтаксис. Вы можете выполнять как простые операции, например, получение текущей даты или преобразование строки в определённый формат, так и сложные вычисления и проверки всего несколькими строками.
• Гибкий анализ и форматированиеАнализ строк дат практически любого формата и преобразование их в желаемый вывод никогда не были такими простыми. Moment.js позволяет быстро и без проблем форматировать даты в пользовательских презентациях..
• Манипуляция датами: Сложение или вычитание дней, месяцев, лет, недель или любых других единиц времени так же просто, как использование методов Добавить() y вычитание ()Это очень полезно, когда вам нужно работать с относительными датами, сроками выполнения или временными рамками, которые динамически меняются.
• Надежная проверка: Если вам нужно проверить, существует ли дата (например, 30 февраля), Moment.js упростит эту задачу. Метод действует() Он способен обнаруживать едва заметные ошибки в формате или логике дат.
• Поддержка часовых поясов и локализации: Спасибо вашему плагину момент-часовой поясКонвертировать даты между разными часовыми поясами очень просто. Кроме того, можно отображать даты, адаптированные к языку пользователя и региональным традициям, что особенно важно в глобальных приложениях.
• Экосистема плагинов: Помимо основной библиотеки, существует целая экосистема плагинов для расширения ее функциональности (календарь, совместимость с другими фреймворками, экзотические форматы...).

Как начать использовать Moment.js в вашем проекте

Установка очень проста . Вы можете подключить Moment.js к своему HTML-коду всего одной строкой:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Если вы работаете с Node.js или современной средой разработки, ее обычно устанавливают с помощью npm или yarn:

npm install moment

После этого вы можете импортировать Moment.js в соответствии с используемым вами синтаксисом:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Создание дат: разные способы и практические примеры

Создавайте даты легко

Чтобы узнать текущую дату и время, просто используйте moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Вы можете создать конкретную дату, передав аргументы:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Вы также можете начать с заданной строки и формата, даже в строгом режиме:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

У вас есть собственный объект Date?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

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

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

moment().format('DD/MM/YYYY');

Если вам нужна более гуманизированная цепочка, вы можете использовать:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Несколько полезных токенов для форматирования :

• YYYY: 4-значный год
• MMмой
• DD: день месяца
• hh o HH: время (в 12-часовом или 24-часовом формате)
• mm: минут
• ss: секунды
• a: утра/вечера

Например, чтобы отобразить только время:

moment().format('HH:mm:ss');

Расширенное форматирование с токенами и региональной поддержкой

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

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Манипулирование датами: сложение, вычитание и сравнение

Работа с относительными датами — одна из сильных сторон Moment.js.

• Добавьте дни, месяцы или годы:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Вычесть единицы:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Начало и конец периодов:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Проверка дат и выявление ошибок

Прежде чем работать с датами, крайне важно убедиться в их правильности:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Это предотвращает неожиданные ошибки в приложениях, получающих даты от пользователя.

Сравнение дат: проверьте, есть ли дата среди других

Moment.js включает несколько методов для сравнения дат:

• isBefore(): Проверяет, предшествует ли одна дата другой.
• isAfter (): Проверяет, является ли дата более поздней.
• isBetween(): Указывает, находится ли дата между двумя указанными датами.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Обработка часовых поясов и международных дат

При работе с пользователями из разных уголков мира часовые пояса могут стать настоящей головной болью . С помощью плагина moment-timezone вы можете легко конвертировать даты между регионами.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

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

Основные примеры использования и расширенные советы

Получить разницу между датами

Вы можете рассчитать время, прошедшее между двумя датами, в разных единицах:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Относительные даты и человеческое время

Moment.js отлично подходит для отображения сообщений типа «3 дня назад» или «через 5 часов»:

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Человеческий календарь

Функция calendar () отображает относительные даты, такие как «вчера в 17:00», «завтра в 9:00», что делает ее очень удобной для календарных приложений.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Поддержка переходов на следующий год и особых дней

Хотите узнать, високосный ли год?

moment([2024]).isLeapYear(); // true

Метод isLeapYear() дает ответ напрямую.

Расширенная настройка: форматы, токены и строгий анализ

Moment.js позволяет работать с пользовательскими строками и токенами для создания или чтения дат в бесчисленных форматах . Кроме того, строгий режим требует точного совпадения, предотвращая незначительные ошибки и нежелательные сюрпризы.

Например, чтобы проанализировать дату в формате «день/месяц/год»:

moment('12/03/2023', 'DD/MM/YYYY', true);

Список распространенных токенов и примеров

• Год: ГГГГ (2024), ГГ (24), Г (-500)
• месяц: MM (01 – 12), MMM (январь), MMMM (январь)
• День: ДД (01 – 31), С (1-й – 31-й)
• Время: ЧЧ (00 – 23), чч (01 – 12), мм (минуты), сс (секунды)
• Часовой пояс: З, ЗЗ

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