Mostrar fecha/hora en el formato local del usuario y compensación horaria

Question

Quiero que el servidor siempre proporcione fechas en UTC en el HTML y que JavaScript en el sitio del cliente las convierta a la zona horaria local del usuario.

Bonificación si puedo generar resultados en el formato de fecha local del usuario.

Answer 1

Parece que la forma más infalible de comenzar con una fecha UTC es crear una nueva Date objeto y utilizar el setUTC… métodos para configurarlo en la fecha/hora que desee.

Entonces los diversos toLocale…String Los métodos proporcionarán resultados localizados.

Ejemplo:

// This would come from the server.
// Also, this whole block could probably be made into an mktime function.
// All very bare here for quick grasping.
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);

console.log(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
console.log(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004
console.log(d.toLocaleDateString());   // -> 02/28/2004
console.log(d.toLocaleTimeString());   // -> 23:45:26

Algunas referencias:

• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Answer 2

Para nuevos proyectos, simplemente use momento.js

Esta pregunta es bastante antigua, así que momento.js No existía en ese momento, pero para proyectos nuevos simplifica mucho tareas como esta.

lo mejor es analizar gramaticalmente su cadena de fecha de UTC de la siguiente manera (cree un ISO-8601 cadena compatible en el servidor para obtener resultados consistentes en todos los navegadores):

var m = moment("2013-02-08T09:30:26Z");

Ahora solo usa m en su aplicación, moment.js utiliza de forma predeterminada la zona horaria local para las operaciones de visualización.Hay Muchas formas de formatear los valores de fecha y hora. o extraer porciones del mismo.

Incluso puedes formatear un objeto de momento en la configuración regional de los usuarios de esta manera:

m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us

Para transformar un objeto moment.js en una zona horaria diferente (es decir,ni el local ni el UTC), necesitarás el extensión de zona horaria moment.js.Esa página también tiene algunos ejemplos, es bastante simple de usar.

Answer 3

Puedes usar new Date().getTimezoneOffset()/60 para la zona horaria.También hay una toLocaleString() Método para mostrar una fecha utilizando la configuración regional del usuario.

Aquí está la lista completa: Trabajar con fechas

Answer 4

Una vez que haya construido su objeto de fecha, aquí hay un fragmento para la conversión:

La función toma un objeto de fecha con formato UTC y una cadena de formato.
Necesitarás un Date.strftime prototipo.

function UTCToLocalTimeString(d, format) {
    if (timeOffsetInHours == null) {
        timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
    }
    d.setHours(d.getHours() + timeOffsetInHours);

    return d.strftime(format);
}

Answer 5

En JS no existen formas simples y multiplataforma de formatear la fecha y hora local, además de convertir cada propiedad como se mencionó anteriormente.

Aquí hay un truco rápido que utilizo para obtener el AAAA-MM-DD local.Tenga en cuenta que esto es un truco, ya que la fecha final ya no tendrá la zona horaria correcta (por lo que deberá ignorar la zona horaria).Si necesito algo más, uso moment.js.

var d = new Date();    
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0,0); 
// 2017-05-09T08:24:26.581Z (but this is not UTC)

d.getTimezoneOffset() devuelve el desplazamiento de la zona horaria en minutos, y d.getTime() está en ms, de ahí x 60,000.

Answer 6

Esto es lo que he usado en proyectos anteriores:

var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set.  again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');

Answer 7

El .getTimezoneOffset() El método informa el desplazamiento de la zona horaria en minutos, contando "hacia el oeste" desde la zona horaria GMT/UTC, lo que da como resultado un valor de desplazamiento negativo respecto al que uno está acostumbrado comúnmente.(Por ejemplo, se informaría que la hora de Nueva York es +240 minutos o +4 horas)

Para obtener un desplazamiento de zona horaria normal en horas, debe utilizar:

var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60

Detalle importante:
Tenga en cuenta que el horario de verano se tiene en cuenta en el resultado, por lo que lo que le ofrece este método es realmente la tiempo compensación, no la ubicación geográfica real zona horaria compensar.

Answer 8

Con la fecha del código PHP utilicé algo como esto.

function getLocalDate(php_date) {
  var dt = new Date(php_date);
  var minutes = dt.getTimezoneOffset();
  dt = new Date(dt.getTime() + minutes*60000);
  return dt;
}

Podemos llamarlo así.

var localdateObj = getLocalDate('2015-09-25T02:57:46');

Answer 9

Mezclo las respuestas hasta ahora y las agrego, porque tuve que leerlas todas e investigar adicionalmente por un tiempo para mostrar una cadena de fecha y hora de db en el formato de zona horaria local de un usuario.

La cadena de fecha y hora proviene de una base de datos python/django en el formato:12/05/2016 15:12:24

La detección confiable del idioma del navegador en JavaScript no parece funcionar en todos los navegadores (consulte JavaScript para detectar la preferencia de idioma del navegador), entonces obtengo el idioma del navegador del servidor.

Pitón/Django:enviar la solicitud del idioma del navegador como parámetro de contexto:

language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })

HTML:escríbalo en una entrada oculta:

<input type="hidden" id="browserlanguage" value={{ language }}/>

JavaScript:obtener el valor de la entrada oculta, p.en-GB,en-US;q=0.8,en;q=0.6/ y luego tomar el primer idioma de la lista solo mediante reemplazo y expresión regular

const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "$1");

JavaScript:convertir a fecha y hora y formatearlo:

var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);

Ver: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

El resultado es (el idioma del navegador es en-gb):12/05/2016, 14:58

Answer 10

La mejor solución que he encontrado es crear etiquetas [time display="llll" datetime="UTC TIME" /] y usar javascript (jquery) para analizarlas y mostrarlas en relación con la hora del usuario.

http://momentjs.com/ Momento.js

mostrará la hora muy bien.

Answer 11

Puede utilizar lo siguiente, que informa la diferencia horaria con respecto a GMT en minutos:

new Date().getTimezoneOffset();

Nota :- esta función devuelve un número negativo.

Answer 12

getTimeZoneOffset() y toLocaleString son buenos para el trabajo básico de fechas, pero si necesita soporte de zona horaria real, mire TimeZone.js de mde.

Hay algunas opciones más discutidas en la respuesta a esta pregunta

Answer 13

// new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
var serverDate = new Date(2018, 5, 30, 19, 13, 15); // just any date that comes from server
var serverDateStr = serverDate.toLocaleString("en-US", {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
})
var userDate = new Date(serverDateStr + " UTC");
var locale = window.navigator.userLanguage || window.navigator.language;

var clientDateStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
});

var clientDateTimeStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

console.log("Server UTC date: " + serverDateStr);
console.log("User's local date: " + clientDateStr);
console.log("User's local date&time: " + clientDateTimeStr);

Answer 14

Para convertir la fecha a fecha local, utilice el método toLocaleDateString().

var date = (new Date(str)).toLocaleDateString(defaultlang, options);

Para convertir la hora a hora local, utilice el método toLocaleTimeString().

var time = (new Date(str)).toLocaleTimeString(defaultlang, options);

Answer 15

No sé cómo configurar la configuración regional, pero javascript es una tecnología del lado del cliente.

usersLocalTime = new Date();

tendrá la hora y fecha del cliente (según lo informado por su navegador y, por extensión, la computadora en la que está sentado).Debería ser trivial incluir la hora del servidor en la respuesta y hacer algunos cálculos simples para estimar el desplazamiento.