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

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

Еще в декабре 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 Интернационализации или нет, мы можем проверить наличие глобального объекта Intl.

if (window.hasOwnPropertyâ € (“Intl”) && typeof Intl === “object”) {
  // Интернационализация API присутствует, давайте использовать это
} международный объект
Intl – это глобальный объект для использования API Интернационализации. Он имеет три свойства, которые являются конструкторами для трех объектов, а именно Collator, NumberFormat и DateTimeFormat.

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

• locales – строка или массив строк, например, представляющих языковые теги; «De» для немецкого языка, «en-GB» для английского языка, используемого в Великобритании. Если языковой тег не указан, языком по умолчанию будет язык выполнения.
• options – объект, свойства которого используются для настройки средства форматирования. Он имеет следующие свойства:

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

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

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

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

Экземпляр объекта DateTimeFormat имеет метод доступа к свойству (getter), называемый format, который возвращает функцию, которая форматирует Date на основе локалей и параметров, найденных в экземпляре DateTimeFormat.

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

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

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

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

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

Увидеть перо ZGbLdL Прети (@rpsthecoder) на CodePen,

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

Увидеть перо gpambJ Прети (@rpsthecoder) на CodePen,

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

Увидеть перо QbjpvK Прети (@rpsthecoder) на CodePen,

toLocaleDateString метод

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

var mydate = new Date (‘2015/04/22’);
var options = {
    будний день: “короткий”,
    год: “числовой”,
    месяц: “длинный”,
    день: “числовой”
};

console.log (mydate.toLocaleDateString ( ‘ан-GB’, опция));
// возвращает «ср, 22 апреля 2015»

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

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

Для тестирования давайте добавим фиктивную локаль «бла» в список проверяемых локалей.

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

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

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

Ссылки