Obtener la zona horaria del cliente (y el desplazamiento) en JavaScript

Nuestro team de trabajo ha estado mucho tiempo investigando la resolución a tus interrogantes, te regalamos la respuestas de modo que deseamos servirte de mucha apoyo.

Solución:

Usar un desplazamiento para calcular la zona horaria es un enfoque incorrecto y siempre encontrará problemas. Las zonas horarias y las reglas de horario de verano pueden cambiar en varias ocasiones durante un año, y es difícil mantenerse al día con los cambios.

Para obtener la zona horaria IANA del sistema en JavaScript, debe usar

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)

A partir de septiembre de 2019, esto funciona en el 95 % de los navegadores utilizados en todo el mundo.

Información de compatibilidad antigua

ecma-402/1.0 dice que timeZone puede no estar definido si no se proporciona al constructor. Sin embargo, el borrador futuro (3.0) solucionó ese problema cambiando a la zona horaria predeterminada del sistema.

En esta versión de la API de internacionalización de ECMAScript, el
timeZone la propiedad permanecerá indefinida si no timeZone propiedad se proporcionó en el objeto de opciones proporcionado a la Intl.DateTimeFormat
constructor. Sin embargo, las aplicaciones no deben depender de esto, ya que las versiones futuras pueden devolver un valor de cadena que identifique la zona horaria actual del entorno del host.

en ecma-402/3.0, que todavía está en un borrador, cambió a

En esta versión de la API de internacionalización de ECMAScript 2015, el
timeZone propiedad será el nombre de la zona horaria predeterminada si no
timeZone propiedad se proporcionó en el objeto de opciones proporcionado a la
Intl.DateTimeFormat constructor. La versión anterior dejó el
timeZone propiedad indefinida en este caso.

Utilizando getTimezoneOffset()

Puedes obtener la zona horaria compensar en minutos así:

var offset = new Date().getTimezoneOffset();
console.log(offset);
// if offset equals -60 then the time zone offset is UTC+01

El desplazamiento de la zona horaria es la diferencia, en minutos, entre UTC y la hora local. Tenga en cuenta que esto significa que el desplazamiento es positivo si la zona horaria local está por detrás de UTC y negativa si está por delante. Por ejemplo, si su zona horaria es UTC+10 (hora estándar del este de Australia), se devolverá -600. El horario de verano evita que este valor sea una constante incluso para un lugar determinado

• Referencia del objeto de fecha de Mozilla

Tenga en cuenta que no todas las zonas horarias se compensan con horas completas: por ejemplo, Terranova es UTC menos 3h 30m (dejando el horario de verano fuera de la ecuación).

Tenga en cuenta también que esto solo le proporciona el desplazamiento de la zona horaria (p. ej., UTC+01), no le proporciona la zona horaria (p. ej., Europa/Londres).

Me doy cuenta de que esta respuesta está un poco fuera de tema, pero me imagino que muchos de nosotros que buscamos una respuesta también queríamos formatear la zona horaria para mostrarla y quizás también obtener la abreviatura de la zona. Así que aquí va…

Si desea que la zona horaria del cliente esté bien formateada, puede confiar en el método JavaScript Date.toString y hacer lo siguiente:

var split = new Date().toString().split(" ");
var timeZoneFormatted = split[split.length - 2] + " " + split[split.length - 1];

Esto le dará “GMT-0400 (EST)”, por ejemplo, incluidos los minutos de la zona horaria cuando corresponda.

Alternativamente, con expresiones regulares puede extraer cualquier parte deseada:

Para “GMT-0400 (EDT)”:

new Date().toString().match(/([A-Z]+[+-][0-9]+.*)/)[1]

Para “GMT-0400”:

new Date().toString().match(/([A-Z]+[+-][0-9]+)/)[1]

Por solo “EDT”:

new Date().toString().match(/(([A-Za-zs].*))/)[1]

Por solo “-0400”:

new Date().toString().match(/([-+][0-9]+)s/)[1]

Referencia de Date.toString: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/toString

EDITAR 6/10/2020: es posible que la solución anterior no funcione en todos los navegadores y configuraciones regionales. Mi recomendación actual es utilizar una biblioteca. Algunas buenas bibliotecas populares son: moment, date-fns 2, luxon o dayjs.

Te mostramos las comentarios y valoraciones de los usuarios

Si posees algún titubeo y forma de desarrollar nuestro escrito puedes añadir una crónica y con mucho gusto lo observaremos.

---

---

Utiliza Nuestro Buscador