Mostrar fecha / hora en formato de usuario y desplazamiento de hora

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

Bonificación si puedo mostrar en el formato de fecha de configuración regional del usuario.

Parece que la forma más infalible de comenzar con una fecha UTC es crear un nuevo Dateobjeto y usar los setUTC…métodos para establecerlo en la fecha / hora que desee.

Luego, los diversos toLocale…Stringmé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:

• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Para nuevos proyectos, solo use moment.js

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

Es mejor analizar su cadena de fecha desde UTC de la siguiente manera (cree una cadena compatible con ISO-8601 en el servidor para obtener resultados consistentes en todos los navegadores):

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

Ahora solo use men su aplicación, moment.js por defecto es la zona horaria local para las operaciones de visualización. Hay muchas formas de formatear los valores de fecha y hora o extraer partes de ellos.

Incluso puede 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 local ni UTC), necesitará la extensión de zona horaria moment.js . Esa página también tiene algunos ejemplos, es bastante simple de usar.

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

Aquí está la lista completa: trabajar con fechas

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

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

    return d.strftime(format);
}

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

Aquí hay un truco rápido que uso para obtener el YYYY-MM-DD local. Tenga en cuenta que este es un truco, ya que la fecha final ya no tendrá la zona horaria correcta (por lo que debe 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 zona horaria en minutos, y d.getTime () está en ms, por lo tanto, x 60,000.

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');

El .getTimezoneOffset()método informa el desplazamiento de la zona horaria en minutos, contando "hacia el oeste" desde la zona horaria GMT / UTC, lo que resulta en un valor de compensación que es negativo a lo que uno está habitualmente acostumbrado. (Por ejemplo, el tiempo de Nueva York sería de +240 minutos o +4 horas)

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

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

Detalles importantes:
tenga en cuenta que el horario de verano se tiene en cuenta en el resultado, por lo que este método le proporciona realmente el desplazamiento de tiempo , no el desplazamiento de zona horaria geográfica real .

Con la fecha del código PHP usé 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');

Mezclo las respuestas hasta ahora y las agrego, porque tuve que leerlas todas e investigar adicionalmente durante 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: 2016-12-05T15: 12: 24.215Z

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 ), por lo que obtengo el idioma del navegador del servidor.

Python / Django: envíe el idioma del navegador de solicitud como parámetro de contexto:

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

HTML: escríbelo en una entrada oculta:

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

JavaScript: obtenga el valor de la entrada oculta, por ejemplo, en-GB, en-US; q = 0.8, en; q = 0.6 / y luego tome 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

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

http://momentjs.com/ Moment.js

mostrará la hora muy bien.

Puede usar lo siguiente, que informa el desplazamiento de la zona horaria de GMT en minutos:

new Date().getTimezoneOffset();

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

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

Para convertir la fecha a la fecha local, use el métodoLocaleDateString ().

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

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

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

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

usersLocalTime = new Date();

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