Una forma definitiva de dar formato a 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 forma de mostrar las fechas a los usuarios, específicas de su idioma y región.

En diciembre de 2012, ECMA lanzó las especificaciones de Internationalization API for JavaScript. La API de internacionalización nos ayuda a mostrar ciertos datos de acuerdo con el idioma y la especificación cultural. Se puede usar para identificar monedas, zonas horarias y más.

En esta publicación veremos el formato de fecha usando esta API.

Conocer la configuración regional del usuario

Para mostrar la fecha según la configuración regional preferida del usuario, primero debemos saber cuál es la configuración regional preferida. Actualmente, la forma infalible de saberlo es preguntarle al usuario; Permitir a los usuarios seleccionar su idioma preferido y la configuración de la región en la página web.

Pero, si eso no es una opción, puede interpretar el encabezado de solicitud Accept-Language o leer los valores de navigator.language (para Chrome y Firefox) o navigator.browserLanguage (para IE).

Tenga en cuenta que no todas estas opciones devuelven el idioma preferido de la IU 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 .

 if (window.hasOwnPropertyâ € <("Intl") && typeof Intl === "object") {// Internationalization API está presente, vamos a usar eso} 

El objeto Intl

Intl es un objeto global para usar la API de internacionalización. Tiene tres propiedades que son constructores para tres objetos: Collator, NumberFormat y DateTimeFormat .

El objeto que utilizaremos es DateTimeFormat que nos ayudará a formatear la fecha y hora según los diferentes idiomas.

El objeto DateTimeFormat

El constructor DateTimeFormat toma dos argumentos opcionales;

• locales : una cadena o una matriz de cadenas que representan las etiquetas de idioma, por ejemplo; "De" 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 del tiempo de ejecución.
• options : un objeto cuyas propiedades se utilizan para personalizar el formateador. Tiene las siguientes propiedades:

Ejemplo:

 var formatter = new Intl.DateTimeFormat ('en-GB'); / * devuelve un formateador que puede formatear una fecha en formato de fecha inglés inglés * / 

 var options = {weekday: 'short'}; var formatter = new Intl.DateTimeFormat ('en-GB', opciones); / * devuelve un formateador que puede formatear una fecha en formato de fecha inglés inglés * junto con el día de la semana en notación breve como 'Jue' para el jueves * / 

La función de formato

La instancia del objeto DateTimeFormat tiene un format acceso de propiedad (getter) llamado que devuelve una función que formatea una Date función de las locales y las options encontradas en la instancia DateTimeFormat .

La función toma un objeto Date o undefined como un argumento opcional y devuelve una string en el formato de fecha solicitada.

Nota: Si el argumento no está undefined o no se proporciona, devuelve el valor de Date.now() en el formato de fecha solicitado.

Aquí está la sintaxis:

 nuevo 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.

Vamos a cambiar el idioma y ver el resultado.

Ahora es el momento de buscar opciones.

El método toLocaleDateString

En lugar de usar un formateador como el que se muestra en los ejemplos anteriores, también puede usar Date.prototype.toLocaleString de la misma manera con los argumentos de locales y options, son similares pero se recomienda utilizar el objeto DateTimeFormat cuando se trata de demasiadas fechas en tu aplicación.

 var mydate = new Date ('2015/04/22'); var opciones = {día laborable: "corto", año: "numérico", mes: "largo", día: "numérico"}; console.log (mydate.toLocaleDateString ('en-GB', opciones)); // regresa "Mié, 22 de abril de 2015" 

Prueba si las configuraciones regionales son compatibles

Para comprobar las locales admitidas, podemos usar el método supportedLocalesOf del objeto DateTimeFormat . Devuelve una matriz de todas las configuraciones regionales de soporte o una matriz vacía si ninguna de las configuraciones regionales es compatible.

Para las pruebas, agreguemos una configuración ficticia "blah" en la lista de configuraciones regionales a verificar.

 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.

• ECMA International: especificación de la API de internacionalización de ECMAScript
• IANA : Registro de subetiquetas de idiomas
• El rincón de Norbert: la API de internacionalización de ECMAScript

6 cosas que amamos hacer cuando las redes sociales están caídas

Para muchas personas, las redes sociales están muy integradas en su agenda diaria. Parece imposible pasar un día sin consultar nuestras cuentas en las redes sociales, y si bien no lo haríamos voluntariamente, hay ocasiones en que el sitio de la red social puede experimentar algún tiempo de inactividad.&qu

(Consejos de tecnología y diseño)

¿Debería contratar a un diseñador web o utilizar un generador web?

Los desarrolladores web son básicamente una caja de herramientas mágica para diseñadores que no son web. Lo que antes estaba fuera del alcance de la gente ahora se puede comprender con muy poco esfuerzo. Pero hay cosas que los creadores de sitios web no pueden hacer que los diseñadores web puedan hacer. La

(Consejos de tecnología y diseño)