Blog/content/posts/2023/javascript/format-date-and-time-strings.md

---
title: "⌚ Форматированные строки из объектов Date и Time"
date: 2023-05-05T23:45:10+03:00
draft: false
tags: [javascript, tutorial]
---

Перевод статьи с ресурса
[gomakethings.com](https://gomakethings.com/how-to-format-date-and-time-strings-with-vanilla-javascript/).

## Объект `Intl.DateTimeFormat`
Объект `Intl.DateTimeFormat` может возвращать из объекта `Date`
строки с различными опциями форматирования.

Чтобы создать объект `Intl.DateTimeFormat` необходимо вызвать конструктор `new Intl.DateTimeFormat()`.

В качестве аргумента передаётся языковой стандарт в виде строки или массива строк.

**Список форматов:**
- Строка из двух символов. _Например, `en` для английского языка._
- Тег и субтег. _Например, `en-US` для английского языка США или `en-GB` для английского языка Великобритании._
- Несколько подзаголовков. Например, `de-CH-1996` для современного швейцарского варианта немецкого языка.

Полный список тегов и субтегов можно найти на
[IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).

**Пример:**

```javascript
// Create a new Intl.DateTimeFormat object
let formatter = new Intl.DateTimeFormat('en-US');
```

## Опции форматирования

Констроктор `new Intl.DateTimeFormat()` в качестве второго аргумента принимает
список опций, которые определяют каким образом необходимо отформатировать строку.

Опции можно смешивать. Опции `dateStyle` или `timeStyle` можно использовать вместе,
но нельзя использовать с другими опциями.

```javascript
// Опеределяем, каким образом должна юыть отформтированна дата
let formatter = new Intl.DateTimeFormat('en-US', {
    // Стиль форматирования для даты
    // Может использоваться с timeStyle, но не с другими опциями
    // 'full' (по умолчанию), 'long', 'medium', 'short'
    dateStyle: 'full',

    // Стиль форматирования для времени
    // Может использоваться с dateStyle, но не с другими опциями
    // 'full' (по умолчанию), 'long', 'medium', 'short'
    timeStyle: 'full',

    // Если true, используется 12 часовой формат времени
    // Значение по умолчанию зависит от локали
    hour12: true,

    // Как отформатировать время суток (am, morning и т.д.)
    // Работает только если используются 12-часовой формат времени
    // 'narrow', 'short', или 'long'
    dayPeriod: 'narrow',

    // Стиль форматирования дней недели
    // 'long' ("Четверг"), 'short' ("Чт"), 'narrow' ("Ч")
    weekday: 'long',

    // Стиль форматирования эпохт
    // 'long' ("Anno Domini"), 'short' ("AD"), 'narrow' ("A")
    era: 'short',

    // Стиль форматирования года
    // 'numeric' ("2023"), '2-digit' ("23")
    year: 'numeric',

    // Стиль форматирования месяца
    // 'numeric' ("3"), '2-digit' ("03"), 'long' ("Март"), 'short' ("Мар"), 'narrow' ("М")
    month: 'long',

    // Стиль форматирования дня месяца
    // 'numeric' ("1"), '2-digit' ("01")
    day: 'numeric',

    // Стиль форматирования часов
    // 'numeric', '2-digit'
    hour: 'numeric',

    // Стиль форматирования минут
    // 'numeric', '2-digit'
    minute: 'numeric',

    // Стиль форматирования секунд
    // 'numeric', '2-digit'
    second: 'numeric',

    // Количество цифр, отоброжаемых в долях секунд
    // от 0 до 3
    fractionalSecondDigits: 0,

    // Стиль форматирования часвого пояса
    // 'long' ("Eastern Standard Time"), 'short' ("EST"), 'shortOffset' ("GMT-5"), 'longOffset' ("GMT-0500"), 'shortGeneric' ("ET"), 'longGeneric' ("Eastern Time")
    timeZoneName: 'short'
});
```

## Пример форматирования даты
Как только определены параметры форматирования объекта `Intl.DateTimeFormat`
необходимо вызвать метод `format()` и передать в качестве аргумента объект `Date`.

```javascript
// Создаю объект Intl.DateTimeFormat
let formatter = new Intl.DateTimeFormat('en-US', {
    dateStyle: 'medium',
    timeStyle: 'short' 
});

// Создаю объект Date
let date = new Date('2023-10-31T22:00:00');

// Форматирую дату в строку
let halloween = formatter.format(date);

console.log(halloween); // "Oct 31, 2023, 10:00 PM"
```