Определенный способ форматировать даты для международных сайтов

Форматы даты различаются в зависимости от региона и языка, поэтому всегда полезно найти способ отображения дат для пользователей, в зависимости от их языка и региона..

Еще в декабре 2012 года ECMA выпустила спецификации API Интернационализации для JavaScript. Интернационализация API помогает нам отображать определенные данные в соответствии с языком и спецификацией. Это может быть использовано для определить валюты, часовые пояса и больше.

В этом посте мы рассмотрим форматирование даты используя этот API.

Знать язык пользователя

Чтобы показать дату в соответствии с предпочтительным языковым стандартом пользователя, сначала нам нужно узнать, что это за предпочтительный языковой стандарт. В настоящее время надежный способ узнать, что это спросить пользователя; позволить пользователям выбирать предпочтительный язык и региональные настройки на веб-странице.

Но, если это не вариант, вы можете интерпретировать Accept-Language Заголовок запроса или прочитайте navigator.language(для Chrome и Firefox) или navigator.browserLanguage(для IE) значения.

Помните, что не все из этих параметров возвращают предпочтительный язык интерфейса браузера..

 var language_tag = window.navigator.browserLanguage || window.navigator.language || «Ан»; // возвращает языковые теги типа 'en-GB'

Проверьте на Интернационализацию API

Чтобы узнать, поддерживает ли браузер API Интернационализации или нет, мы можем проверить наличие глобального объекта международный.

 если (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // API интернационализации присутствует, давайте использовать это

международный объект

международный является глобальным объектом для использования API Интернационализации. Он имеет три свойства, которые являются конструкторами для трех объектов, а именно Collator, NumberFormat, а также DateTimeFormat.

Объект, который мы будем использовать, DateTimeFormat что поможет нам отформатировать дату и время на разных языках.

DateTimeFormat объект

DateTimeFormat конструктор принимает два необязательных аргумента;

локали - например, строка или массив строк, которые представляют языковые теги; “де” для немецкого языка, “ан-ГБ” для английского используется в Великобритании. Если языковой тег не указан, языком по умолчанию будет язык выполнения.
опции - объект, свойства которого используются для настройки средства форматирования. Он имеет следующие свойства:

Имущество	Описание	Возможные значения
день	День месяца	“2-значный”, “числовой”
эпоха	Эра, в которую попадает дата, например: до н.э.	“узкий”, “короткая”, “долго”
formatMatcher	Алгоритм, используемый для сопоставления формата	“основной”, “наиболее подходящий”[По умолчанию]
час	Представляет часы во времени	“2-значный”, “числовой”
hour12	Указывает 12-часовой формат (`правда`) или 24-часовой формат (`ложный`)	`правда`, `ложный`
localeMatcher	Алгоритм, используемый для сопоставления локалей	“уважать”, “наиболее подходящий”[По умолчанию]
минут	Минуты во времени	“2-значный”, “числовой”
месяц	Месяц в году	“2-значный”, “числовой”, “узкий”, “короткая”, “долго”
второй	Секунды во времени	“2-значный”, “числовой”
часовой пояс	Часовой пояс, чтобы применить	“универсальное глобальное время”, по умолчанию - часовой пояс времени выполнения
TimeZoneName	Часовой пояс даты	“короткая”, “долго”
будний день	День в неделю	“узкий”, “короткая”, “долго”
год	Год даты	“2-значный”, “числовой”

Пример:

 var formatter = new Intl.DateTimeFormat ('en-GB'); / * возвращает форматер, который может форматировать дату в британском английском формате даты * /

 var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', параметры); / * возвращает средство форматирования, которое может форматировать дату в британском английском формате даты * вместе с днем недели в короткой записи, например, «четверг» для четверга * /

формат функция

Экземпляр DateTimeFormat объект имеет свойство accessor (геттер) с именем формат которая возвращает функцию, которая форматирует Дата на основе локали а также опции найдено в DateTimeFormat пример.

Функция принимает Дата объект или не определено в качестве необязательного аргумента и возвращает строка в запрошенном формате даты.

Замечания: Если аргумент либо не определено или не предоставлено, то возвращает значение Date.now () в запрошенном формате даты.

Вот синтаксис:

 new Intl.DateTimeFormat (). format () // вернет текущую дату в формате даты выполнения

А теперь давайте закодируем простое форматирование даты.

Смотрите Pen ZGbLdL от Preethi (@rpsthecoder) на CodePen.

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

Смотрите Pen gpambJ от Preethi (@rpsthecoder) на CodePen.

Теперь пришло время изучить варианты.

Смотрите перо QbjpvK от Preethi (@rpsthecoder) на CodePen.

toLocaleDateString метод

Вместо использования средства форматирования, как показано в приведенных выше примерах, вы также можете использовать Date.prototype.toLocaleString так же, как с локали а также опции аргументы, они похожи, но рекомендуется использовать DateTimeFormat объект при работе со слишком большим количеством дат в вашем приложении.

 var mydate = new Date ('2015/04/22'); var options = weekday: "short", year: "numeric", month: "long", day: "numeric"; console.log (mydate.toLocaleDateString ( 'ан-GB', опционы)); // возвращает «ср, 22 апреля 2015»

Проверьте, если локали поддерживаются

Для проверки поддерживаемых локали, мы можем использовать метод supportedLocalesOf из DateTimeFormat объект. Возвращает массив всех поддерживаемых локалей или пустой массив, если ни одна из локалей не поддерживается.

Для тестирования добавим фиктивную локаль “вздор” в списке локалей для проверки.

 console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // возвращает массив ["zh", "fa-pes"]

Поддержка браузера

На конец апреля 2015 года основные браузеры поддерживают API Интернационализации.