Una forma definitiva de formatear fechas para sitios internacionales
Los formatos de fecha varían según la región y el idioma, por lo que siempre es útil si podemos encontrar una manera de mostrar las fechas a los usuarios, específicas de su idioma y región..
En diciembre de 2012, ECMA lanzó las especificaciones de la API de internacionalización para JavaScript. La API de internacionalización nos ayuda a mostrar ciertos datos de acuerdo con el lenguaje y las especificaciones de corte. Puede ser usado para identificar monedas, zonas horarias y más.
En este post estaremos investigando. formato de fecha usando esta API.
Conozca la localización del usuario
Para mostrar la fecha según la configuración regional preferida del usuario, primero necesitamos saber cuál es la configuración regional preferida. Actualmente la manera infalible de saberlo es preguntarle al usuario; Permite a los usuarios seleccionar su idioma preferido y la configuración regional en la página web..
Pero, si esa no es una opción puedes interpretar el Aceptar-lenguaje solicitar encabezado o leer el lenguaje de navegación(para Chrome y Firefox) o navigator.browserLanguage(para IE) valores.
Tenga en cuenta que no todas esas opciones devuelven el idioma preferido de la interfaz de usuario del navegador.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // devuelve etiquetas de idioma como 'en-GB'
Comprobar la API de internacionalización
Para saber si el navegador admite la API de internacionalización o no, podemos verificar la presencia del objeto global Intl.
si (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // La internacionalización API está presente, usemos eso los Intl objeto
Intl Es un objeto global para el uso de la API de internacionalización. Tiene tres propiedades que son constructores para tres objetos a saber. Traductor, Formato numérico, y DateTimeFormat.
El objeto que vamos a utilizar es DateTimeFormat Lo que nos ayudará a formatear la fecha y hora según diferentes idiomas..
los DateTimeFormat objeto
los DateTimeFormat el constructor toma dos argumentos opcionales;
locales- una cadena o una matriz de cadenas que representan las etiquetas de idioma, por ejemplo; “Delaware” para el idioma alemán, “en-GB” Para el inglés utilizado en el Reino Unido. Si no se menciona una etiqueta de idioma, la configuración regional predeterminada será la de tiempo de ejecución.opciones- un objeto cuyas propiedades se utilizan para personalizar el formateador. Tiene las siguientes propiedades:
| Propiedad | Descripción | Valores posibles |
| día | Día del mes | “2 dígitos”, “numérico” |
| era | Era la fecha en que cae, Ex: BC | “estrecho”, “corto”, “largo” |
| formatMatcher | El algoritmo utilizado para la coincidencia de formato. | “BASIC”, “mejor ajuste”ElDefecto] |
| hora | Representa las horas en el tiempo. | “2 dígitos”, “numérico” |
| hora12 | Indica formato de 12 horas (cierto) o formato de 24 horas (falso) | cierto, falso |
| localeMatcher | El algoritmo utilizado para la coincidencia de locale | “buscar”, “mejor ajuste”ElDefecto] |
| minuto | Minutos en el tiempo | “2 dígitos”, “numérico” |
| mes | Mes en un año | “2 dígitos”, “numérico”, “estrecho”, “corto”, “largo” |
| segundo | Segundos en el tiempo | “2 dígitos”, “numérico” |
| zona horaria | Zona horaria para aplicar | “UTC”, el valor predeterminado es la zona horaria de tiempo de ejecución |
| timeZoneName | Zona horaria de la fecha | “corto”, “largo” |
| día laborable | Dia en la semana | “estrecho”, “corto”, “largo” |
| año | Año de la fecha | “2 dígitos”, “numérico” |
Ejemplo:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * devuelve un formateador que puede formatear una fecha en formato de fecha en inglés del Reino Unido * / opciones var = día de la semana: 'corto'; var formatter = new Intl.DateTimeFormat ('en-GB', opciones); / * devuelve un formateador que puede formatear una fecha en formato de fecha en inglés del Reino Unido * junto con el día de la semana en breve notación como 'Jue' para el jueves * / los formato función
La instancia de la DateTimeFormat objeto tiene un descriptor de acceso de propiedad (getter) llamado formato que devuelve una función que formatea una Fecha basado en el locales y opciones encontrado en el DateTimeFormat ejemplo.
La función toma un Fecha objeto o indefinido como un argumento opcional y devuelve un cuerda en el formato de fecha solicitada.
Nota: Si el argumento es cualquiera indefinido o no proporcionado entonces devuelve el valor de Date.now () en el formato de fecha solicitada.
Aquí está la sintaxis:
new Intl.DateTimeFormat (). format () // devolverá la fecha actual en el formato de fecha de ejecución
Y ahora vamos a codificar un formato de fecha simple.
Cambiemos el idioma y veamos la salida..
Ahora, es hora de mirar en opciones.
los toLocaleDateString método
En lugar de usar un formateador como se muestra en los ejemplos anteriores, también puede usar Date.prototype.toLocaleString de la misma manera con el locales y opciones argumentos, son similares pero se recomienda usar el DateTimeFormat Objeto cuando se trata de demasiadas fechas en su aplicación.
var mydate = new Date ('2015/04/22'); var options = día de la semana: "corto", año: "numérico", mes: "largo", día: "numérico"; console.log (mydate.toLocaleDateString ('en-GB', opciones)); // devuelve "mié, 22 de abril de 2015" Prueba si el locales son compatibles
Para comprobar el soporte locales, podemos usar el método apoyadoLocalesOf de DateTimeFormat objeto. Devuelve una matriz de todas las configuraciones regionales compatibles o una matriz vacía si ninguna de las configuraciones regionales es compatible.
Para la prueba, vamos a agregar un escenario ficticio “paja” en la lista de locales a comprobar.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // devuelve Array ["zh", "fa-pes"]
Soporte del navegador
A finales de abril de 2015, los principales navegadores admiten la API de internacionalización..
Referencias
- ECMA Internacional: Especificación de API de internacionalización ECMAScript
- IANA: Registro de subetiquetas de idioma
- El rincón de Norbert: la API de internacionalización de ECMAScript
