Intl.DateTimeFormat

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

@@ -0,0 +1,125 @@
+---
+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"
+```