Uma maneira definitiva de formatar datas para sites internacionais
Os formatos de data variam de acordo com a região e o idioma, por isso, é sempre útil encontrar uma maneira de exibir as datas para os usuários, específicos para seu idioma e região.
Em dezembro de 2012, a ECMA divulgou as especificações da API de internacionalização para JavaScript. A API de internacionalização nos ajuda a exibir determinados dados de acordo com a linguagem e a especificação de corte. Pode ser usado para identificar moedas, fusos horários e mais.
Neste post estaremos olhando para formatação de data usando esta API.
Conheça a localidade do usuário
Para mostrar a data como a localidade preferida do usuário, primeiro precisamos saber qual é a localidade preferida. Atualmente, a maneira infalível de saber é perguntar ao usuário; permite que os usuários selecionem suas configurações preferidas de idioma e região na página da Web.
Mas, se isso não é uma opção, você pode interpretar Aceitar Idioma solicitar cabeçalho ou ler o navigator.language(para Chrome e Firefox) ou navigator.browserLanguage(para IE) valores.
Por favor, saiba que nem todas essas opções retornam o idioma preferido da interface do usuário do navegador.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // retorna tags de idioma como 'en-GB'
Verificar a API de internacionalização
Para saber se o navegador suporta ou não a API de internacionalização, podemos verificar a presença do objeto global Intl.
if (window.hasOwnPropertyâ €)‹("Intl") && typeof Intl === "object") // A API de internacionalização está presente, vamos usar isso o Intl objeto
Intl é um objeto global para usar a API de internacionalização. Ele tem três propriedades que são construtores para três objetos, ou seja, Collator, Formato numérico, e DateTimeFormat.
O objeto que vamos usar é DateTimeFormat o que nos ajudará a formatar o tempo de data como por diferentes idiomas.
o DateTimeFormat objeto
o DateTimeFormat construtor leva dois argumentos opcionais;
locales- uma string ou uma matriz de strings que representam as tags de idioma, por exemplo; “de” para o idioma alemão, “en-GB” para o inglês usado no Reino Unido. Se uma tag de idioma não for mencionada, a localidade padrão será a de tempo de execução.opções- um objeto cujas propriedades são usadas para personalizar o formatador. Tem as seguintes propriedades:
| Propriedade | Descrição | Valores possíveis |
| dia | Dia do mês | “2 dígitos”, “numérico” |
| era | Era a data cai, Ex: BC | “limitar”, “baixo”, “longo” |
| formatMatcher | O algoritmo usado para correspondência de formato | “básico”, “melhor ajuste”[Padrão] |
| hora | Representa as horas no tempo | “2 dígitos”, “numérico” |
| hour12 | Indica o formato de 12 horas (verdade) ou formato de 24 horas (falso) | verdade, falso |
| localeMatcher | O algoritmo usado para correspondência de código de idioma | “olho para cima”, “melhor ajuste”[Padrão] |
| minuto | Minutos no tempo | “2 dígitos”, “numérico” |
| mês | Mês em um ano | “2 dígitos”, “numérico”, “limitar”, “baixo”, “longo” |
| segundo | Segundos no tempo | “2 dígitos”, “numérico” |
| fuso horário | Fuso horário para aplicar | “UTC”, o padrão é o fuso horário do tempo de execução |
| timeZoneName | Fuso horário da data | “baixo”, “longo” |
| dia da semana | Dia da semana | “limitar”, “baixo”, “longo” |
| ano | Ano da data | “2 dígitos”, “numérico” |
Exemplo:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * retorna um formatador que pode formatar uma data no formato de data em inglês do Reino Unido * / var options = dia da semana: 'curto'; var formatter = new Intl.DateTimeFormat ('en-GB', opções); / * retorna um formatador que pode formatar uma data no formato de data em inglês do Reino Unido * juntamente com o dia da semana em uma notação curta como "quinta-feira" para quinta-feira * / o formato função
A instância do DateTimeFormat objeto tem um acessador de propriedade (getter) chamado formato que retorna uma função que formata um Encontro baseado no locales e opções encontrado no DateTimeFormat instância.
A função leva um Encontro objeto ou Indefinido como um argumento opcional e retorna um corda no formato de data solicitado.
Nota: Se o argumento for Indefinido ou não fornecido, então, retorna o valor de Date.now () no formato de data solicitado.
Aqui está a sintaxe:
novo Intl.DateTimeFormat (). format () // retornará a data atual no formato de data de tempo de execução
E agora vamos codificar uma formatação de data simples.
Vamos mudar o idioma e ver a saída.
Agora é hora de olhar para as opções.
o toLocaleDateString método
Em vez de usar um formatador como mostrado nos exemplos acima, você também pode usar Date.prototype.toLocaleString da mesma maneira com o locales e opções argumentos, eles são semelhantes, mas é recomendável usar o DateTimeFormat objeto ao lidar com muitas datas em sua aplicação.
var mydate = new Date ('2015/04/22'); var options = dia da semana: "curto", ano: "numérico", mês: "longo", dia: "numérico"; console.log (mydate.toLocaleDateString ('en-GB', opções)); // retorna "quarta-feira, 22 de abril de 2015" Teste se o locales são suportados
Para verificar o suporte locales, podemos usar o método supportedLocalesOf do DateTimeFormat objeto. Ele retorna uma matriz de todas as localidades de suporte ou uma matriz vazia se nenhuma das localidades for suportada.
Para testes, vamos adicionar uma localidade fictícia “blá” na lista de localidades a serem verificadas.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // retorna Array ["zh", "fa-pes"]
Suporte de Navegador
No final de abril de 2015, os principais navegadores suportam a API de internacionalização.
Referências
- ECMA Internacional: Especificação da API de internacionalização ECMAScript
- IANA: Registro de subtítulo de idioma
- Canto de Norbert: A API de Internacionalização ECMAScript
