diff --git a/content/posts/2023/javascript/format-date-and-time-strings.md b/content/posts/2023/javascript/format-date-and-time-strings.md new file mode 100644 index 0000000..2673735 --- /dev/null +++ b/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" +```