Переход на 24-часовой формат в moment.js: функция meridiem

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

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

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

Чтобы отобразить время в 24-часовом формате с использованием библиотеки Moment.js, используется формат moment().format('HH:mm'). Здесь HH обозначает часы в диапазоне 00 до 23, а mm — минуты.

JS
Скопировать код
const formattedTime = moment().format('HH:mm');
console.log(formattedTime); // Верите или нет, но сейчас "14:23"!

Если вам требуется переключиться с 12-часового формата на 24-часовой, достаточно заменить hh на HH в вашем коде.

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

Переход между форматами времени

Один и тот же подход не всегда подходит для всех задач, особенно когда речь идет о форматах времени. В Moment.js токен LT отображает время в 12-часовом формате с указанием AM/PM, подходящем для конкретной локали.

JS
Скопировать код
let twelveHourTime = moment().format('LT'); // Например, "2:23 PM"... время для перерыва на чай!

Чтобы преобразовать это время в 24-часовой формат, можно изменить строку формата следующим образом:

JS
Скопировать код
let twentyFourHourTime = twelveHourTime.replace(/(\d+)(:\d+)(\s+)(AM|PM)/, 
  (match, hour, minute, space, meridiem) => `${hour.padStart(2,'0')}${minute}`); // Вот так... работаем с математикой!

Работа с единицами времени

Когда требуется повышенная точность, на помощь приходят секунды ss и миллисекунды SSS.

JS
Скопировать код
const fullTime = moment().format('HH:mm:ss.SSS');
console.log(fullTime); // Такая точность: "14:23:15.123"

В Moment.js предусмотрены методы для управления компонентами времени, например, hour, minute и second.

JS
Скопировать код
const hour = moment().hour(); // Получаем текущий час
moment().hour(15).minute(30); // Устанавливаем время на 15:30

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

Широко известно, что представление времени в виде расписания движения поездов помогает понять специфику 24-часового формата:

Markdown
Скопировать код
| Поезд (Moment)  | Время отправления | Время в 24-ч. формате |
| --------------- | ----------------- | --------------------- |
| Утренний        | 04:00             | `04:00`               |
| Полденный       | 12:00             | `12:00`               |
| Дневной         | 15:00             | `15:00`               |
| Ночной          | 00:00             | `00:00`               |

Так мы распрощаемся с путаницей AM/PM.

JS
Скопировать код
moment().format('HH:mm'); // Преобразование текущего времени в 24-часовой формат

Приятного пути! И маршрут от 00:00 до 23:59 прольется гладко, без всяких сбоев.

Учет каждого часового пояса

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

Для настройки 24-часового отображения без AM/PM используйте функцию meridiem:

JS
Скопировать код
moment.updateLocale('en', {
  meridiem : function (hour, minute, isLowerCase) {
    return ''; // Прощай, AM/PM!
  }
});

Продвинутое управление временем

Moment.js предоставляет мощные инструменты для конвертации, проверки и управления временем:

  1. Конвертация из 12-часового в 24-часовой формат и обратно.
  2. Проверка корректности пользовательского формата времени.
  3. Реализация обратного отсчета или планирование событий.
JS
Скопировать код
const isValidTime = (time) => moment(time, 'HH:mm').isValid(); // Проверка корректности времени
const addHours = (time, hoursToAdd) => moment(time, 'HH:mm').add(hoursToAdd, 'hours').format('HH:mm'); // Добавление часов к времени

const eventTime = moment('2023-05-01T15:00:00'); // Время планируемого события
const countdown = moment.duration(eventTime.diff(moment())).humanize(); // "через 10 дней"... или уже меньше!

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

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

  1. Moment.js | Документация — Официальная документация Moment.js.
  2. Шпаргалка по Moment.js — Шпаргалка по форматам дат в Moment.js.
  3. Date.prototype.toLocaleTimeString() – JavaScript | MDN — Метод JavaScript для форматирования времени.
  4. Проблемы с Moment.js · moment/moment · GitHub — Трекер проблем Moment.js.
  5. Moment.js | Руководства — Руководства по использованию Moment.js.
  6. moment – npm — Страница библиотеки Moment.js на NPM.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой формат используется для отображения времени в 24-часовом формате в Moment.js?
1 / 5