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

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

Существует так много библиотек, позволяющих легко работать с локализацией или интернационализацией ( i18n) объектов даты. Некоторые из этих библиотек:

Но вам может не понадобиться ни одна из этих библиотек для базового форматирования и локализации объектов даты.

Вы можете использовать Date.prototype.toLocaleString и его настраиваемый API, чтобы легко получить локализованный вывод. Как и в следующем примере, мы будем использовать Locale String, чтобы легко получить читаемую дату, желаемую пользователем:

const date = new Date() // Date from current timestamp
console.log(+date, date);
/* 👆
  1581422692394
  Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/
// For above date, let's see different locales
console.log(
  'For USA Users: ', date.toLocaleString('en-US'))
// 👆 For USA based Users:  2/11/2020, 1:04:52 PM
console.log(
  'For UK Users: ', date.toLocaleString('en-GB'))
// 👆 For UK based Users:  11/02/2020, 13:04:52
console.log(
  'For DE Users: ', date.toLocaleString('de-DE'))
// 👆 For DE based Users:  11.2.2020, 13:04:52

Но это не так; вы видели только основные операции.

Эта функция также принимает второй параметр как объект JavaScript. Вы можете настроить результат `toLocaleString`, добавив некоторые определенные ключи и связанные значения в этот объект JS. Например, вы можете удалить будний день; изменить отображение месяца и т. д.

Давайте посмотрим на некоторые примеры дополнительной настройки вывода со вторым параметром.

const date = new Date() // Date from current timestamp
console.log(+date, date);
/* 👆
  1581422692394
  Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/
const readableDate = date.toLocaleString('de-DE', {
  day: "2-digit",
  month: "long",
  year: "2-digit"
});
// 👆 "11. Februar 20"
/*
year: "numeric" → "11. Februar 2020"
month: "numeric" → "11.2.20"
month: "2-digit" → "11.02.20"
month: "short" → "11. Feb. 20"
month: "narrow" → "11. F 20"
*/

Сигнатура объекта для настройки вывода функции toLocaleString может иметь следующие ключи. Хотя ключей намного больше, я перечисляю здесь только самые распространенные.

  • Стиль даты: [ 'full', 'long', 'medium', 'short' ]
  • Стиль времени: [ 'full', 'long', 'medium', 'short' ]
  • timeZone: Time Some из Базы данных IANA TimeZone
  • месяц: [ 'numeric', '2-digit', 'long', 'short', 'narrow' ]
  • год: [ 'numeric', '2-digit' ]
  • день недели: [ 'long', 'short', 'narrow' ]
  • день, час, минута и секунда: [ 'numeric', '2-digit' ]
  • timeZooneName: [ 'long', 'short' ]

На что следует обратить внимание

Здесь есть на что обратить внимание:

  • Любое числовое значение имеет эти два значения: numeric и 2-digit
  • И строковые значения из full, long, medium, short и narrow
  • Все с возможным односимвольным сокращением может иметь значение narrow.

Еще одна важная вещь, на которую следует обратить внимание, это:

вам не нужно придерживаться определенного часового пояса, если вам нужен желаемый результат.
Для . в качестве разделителя используйте de-DE; для / в качестве разделителя используйте en-GB и т. д.

Подробнее об этой функции можно прочитать в Документации MDN toLocaleString.

Специальные функции

Подобно приведенной выше функции toLocaleString; есть точно такие же функции только для даты или времени. Следовательно, вам не нужно выполнять какую-либо строковую операцию для разделения даты и времени.

Только для выходных данных Date вы можете использовать date.toLocaleDateString

const readableDate = date.toLocaleDateString('de-DE', {
  day: "2-digit",
  month: "long",
  year: "2-digit"
});
console.log(readableDate);
// 👆 11. Februar 20

Подробнее об этой функции можно прочитать в Документации MDN toLocaleDateString.

Время

Если вам нужны только строки времени, вы можете использовать date.toLocaleTimeString

const readableTime = date.toLocaleTimeString('de-DE', {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});
console.log(readableTime);
// 👆 13:04:52

Подробнее об этой функции можно прочитать в Документации MDN toLocaleString.

Вывод

Даты — очень важная информация для отображения в любом приложении. Приложения, которые так же просты, как ToDo или этот блог. Даты также являются сложными объектами.

Но вам не нужны тяжелые библиотеки все время. Этот пост дает краткое представление о том, как добиться желаемого форматирования объектов даты.

Что вы используете для манипулирования объектом Date?

Дайте мне знать в комментариях 💬 или в Твиттере на @patelpankaj и @time2hack

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею с другими 🗣

Подпишитесь на блог, чтобы получать новые статьи прямо на почту.

Кредиты

Фото автора Charles Deluvio на Unsplash

Первоначально опубликовано на https://time2hack.com 18 февраля 2020 г.