2011-06-29 78 views
191

Desde el servidor obtengo una variable de fecha y hora en este formato: 6/29/2011 4:52:48 PM y está en hora UTC. Quiero convertirlo al tiempo del navegador del usuario actual usando JavaScript.Convertir hora UTC a fecha hora local

¿Cómo se puede hacer esto utilizando JavaScript o jQuery?

+0

Código Muestra aquí: [http: // stackoverflow.com/questions/3830418/is-there-a-jquery-plugin-to-convert-utc-datetimes-to-local-user-timezone] (http://stackoverflow.com/questions/3830418/is-there-a -jquery-plugin-to-convert-utc-datetimes-to-local-user-timezone) –

+0

Ten cuidado. Ese es un formato de fecha extraño, así que asegúrese de especificarlo en cualquier solución que use. Si es posible, solicite al servidor que envíe la fecha en formato ISO. –

Respuesta

238

Anexar 'UTC' de la cadena antes de convertirlo en una fecha en javascript:

var date = new Date('6/29/2011 4:52:48 PM UTC'); 
date.toString() // "Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)" 
+4

function localizeDateStr (date_to_convert_str) { var date_to_convert = new Date (date_to_convert_str); var local_date = new Date(); date_to_convert.setHours (date_to_convert.getHours() + local_date.getTimezoneOffset()); return date_to_convert.toString(); } – matt

+4

@matt offSet devuelve minutos, no horas, necesita dividir por 60 – bladefist

+0

@matt también tenga en cuenta que hay zonas horarias que son fracciones de horas de inactividad. y no necesita usar el desplazamiento de zona horaria cuando hay funciones getter y setter para UTC y los valores locales –

26

debería darse el (UTC) (en minutos) del cliente:

var offset = new Date().getTimezoneOffset(); 

Y luego haga la correspondiente suma o resta hasta el momento en que obtiene del servidor.

Espero que esto ayude.

+0

Esto definitivamente ayuda cuando convierto la entrada del usuario en el tiempo del servidor utc, – anIBMer

+2

¿cómo sé que necesito agregar o restar el desplazamiento al tiempo proveniente del servidor? – Mou

18

ponga esta función en su cabeza:

<script type="text/javascript"> 
function localize(t) 
{ 
    var d=new Date(t+" UTC"); 
    document.write(d.toString()); 
} 
</script> 

luego generar el siguiente para cada fecha en el cuerpo de su página:

<script type="text/javascript">localize("6/29/2011 4:52:48 PM");</script> 

Para quitar la zona GMT y hora, cambie la siguiente línea:

document.write(d.toString().replace(/GMT.*/g,"")); 
+5

'localizar (" 29/6/2011 4:52:48 ");' no funciona en FireFox ya que estoy usando el formato de 24 horas – BrainCoder

+3

muchas gracias. He estado buscando la forma más eficiente de localizar el tiempo UTC durante horas. ¡Usted señor es un caballero y erudito! – jiaoziren

+0

Gracias a Dios que me he caído en esta respuesta, hubiera muerto de lo contrario. – niravpatel9898

3

Para mí el más simple parecía utilizando

datetime.setUTCHours(datetime.getHours()); 
datetime.setUTCMinutes(datetime.getMinutes()); 

(pensé la primera línea podría ser suficiente pero hay zonas horarias que están fuera en fracciones de horas)

+0

¿Alguien tiene algún problema con esto? Esta parece ser la mejor opción para mí. Tomé una cadena UTC que tenía "(UTC)" al final, la configuré como un objeto Date usando 'new Date ('date string')', y luego agregué estas dos líneas y parece que está regresando con una hora basada completamente en la marca de tiempo UTC del servidor con ajustes realizados para que coincida con la hora local del usuario. También tengo que preocuparme por las zonas horarias raras de fracciones de hora ... No estoy seguro si se mantiene perfectamente todo el tiempo ... – tylerl

56

Esta es una solución universal:

function convertUTCDateToLocalDate(date) { 
    var newDate = new Date(date.getTime()+date.getTimezoneOffset()*60*1000); 

    var offset = date.getTimezoneOffset()/60; 
    var hours = date.getHours(); 

    newDate.setHours(hours - offset); 

    return newDate; 
} 

Uso:

var date = convertUTCDateToLocalDate(new Date(date_string_you_received)); 

mostrar la fecha basado en el entorno local de cliente:

date.toLocaleString(); 
+24

No funciona con todas las zonas horarias. ¡Hay una buena razón por la cual getTimeZoneOffset está en minutos! http://www.geographylists.com/list20d.html – siukurnin

+5

@siukurnin. así que para administrar la zona horaria extraña, use newDate.setTime (date.getTime() + date.getTimezoneOffset() * 60 * 1000) –

+11

newDate.setMinutes (date.getMinutes() - date.getTimezoneOffset()) sería suficiente. En las horas correctas también – Lu55

4

Utilice esto para UTC y la conversión de hora local y viceversa.

//Covert datetime by GMT offset 
//If toUTC is true then return UTC time other wise return local time 
function convertLocalDateToUTCDate(date, toUTC) { 
    date = new Date(date); 
    //Local time converted to UTC 
    console.log("Time: " + date); 
    var localOffset = date.getTimezoneOffset() * 60000; 
    var localTime = date.getTime(); 
    if (toUTC) { 
     date = localTime + localOffset; 
    } else { 
     date = localTime - localOffset; 
    } 
    date = new Date(date); 
    console.log("Converted time: " + date); 
    return date; 
} 
+3

qué sucedió en el momento del horario de verano. Zona horaria CET – NovusMobile

+0

ver mi respuesta @ http://stackoverflow.com/questions/6525538/convert-utc-date-time-to-local-date-time-using-javascript/31453408#31453408 – Hulvej

4

respuesta de Matt no se encuentra el hecho de que el horario de verano podría ser diferente entre la fecha() y la fecha y hora que necesita para convertir - aquí está mi solución:

function ConvertUTCTimeToLocalTime(UTCDateString) 
    { 
     var convertdLocalTime = new Date(UTCDateString); 

     var hourOffset = convertdLocalTime.getTimezoneOffset()/60; 

     convertdLocalTime.setHours(convertdLocalTime.getHours() + hourOffset); 

     return convertdLocalTime; 
    } 

Y los resultados en el depurador:

UTCDateString: "2014-02-26T00:00:00" 
convertdLocalTime: Wed Feb 26 2014 00:00:00 GMT-0800 (Pacific Standard Time) 
-1

En angular que utiliza la respuesta de Ben de esta manera:

$scope.convert = function (thedate) { 
    var tempstr = thedate.toString(); 
    var newstr = tempstr.toString().replace(/GMT.*/g, ""); 
    newstr = newstr + " UTC"; 
    return new Date(newstr); 
}; 

Editar: Angular 1.3.0 GMT añadido soporte para filtrar la fecha, no he usar todavía, pero debería ser más fácil, aquí es el formato:

{{ date_expression | date : format : timezone}} 

Angular 1.4.3 Date API

1

que responder a esta Cualquier Si una de las funciones que deben mostrarse vez convertida quiere al elemento id específico y aplicar formato de fecha cadena aaaa-mm-dd aquí date1 es cadena e ids es id del elemento que se va a mostrar en el tiempo.

function convertUTCDateToLocalDate(date1, ids) 
{ 
    var newDate = new Date(); 
    var ary = date1.split(" "); 
    var ary2 = ary[0].split("-"); 
    var ary1 = ary[1].split(":"); 
    var month_short = Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'); 
    newDate.setUTCHours(parseInt(ary1[0])); 
    newDate.setUTCMinutes(ary1[1]); 
    newDate.setUTCSeconds(ary1[2]); 
    newDate.setUTCFullYear(ary2[0]); 
    newDate.setUTCMonth(ary2[1]); 
    newDate.setUTCDate(ary2[2]); 
    ids = document.getElementById(ids); 
    ids.innerHTML = " " + newDate.getDate() + "-" + month_short[newDate.getMonth() - 1] + "-" + newDate.getFullYear() + " " + newDate.getHours() + ":" + newDate.getMinutes() + ":" + newDate.getSeconds(); 
      } 

sé que la respuesta ha sido ya aceptada, pero he llegado hasta aquí causa de Google y lo hice resolver con conseguir la inspiración de respuesta aceptada, así que quería compartir simplemente que si alguien necesita.

1

Basado en respuesta @digitalbath, aquí hay una pequeña función de captar la marca de hora UTC y mostrar la hora local en un elemento DOM dado (usando jQuery para esta última parte):

https://jsfiddle.net/moriz/6ktb4sv8/1/

<div id="eventTimestamp" class="timeStamp"> 
    </div> 
    <script type="text/javascript"> 
    // Convert UTC timestamp to local time and display in specified DOM element 
    function convertAndDisplayUTCtime(date,hour,minutes,elementID) { 
    var eventDate = new Date(''+date+' '+hour+':'+minutes+':00 UTC'); 
    eventDate.toString(); 
    $('#'+elementID).html(eventDate); 
    } 
    convertAndDisplayUTCtime('06/03/2015',16,32,'eventTimestamp'); 
    </script> 
48

En mi punto de vista, los servidores siempre deben, en el caso general, devolver una fecha y hora en el estandarizado ISO 8601-format.

Más información aquí:

En este caso, el servidor volvería '2011-06-29T16:52:48.000Z' que alimentar directamente en el objeto Date JS.

var utcDate = '2011-06-29T16:52:48.000Z'; // ISO-8601 formatted date returned from server 
var localDate = new Date(utcDate); 

El localDate será en la hora local correcta que en mi caso serían dos horas más tarde (tiempo DK).

Realmente realmente no tiene que hacer todo este análisis que simplemente complica las cosas, siempre y cuando sea coherente con el formato esperado del servidor.

+1

cómo obtener la fecha de formato iso ? Estoy obteniendo la fecha en formato UTC con UTC adjunto al final – Deepika

+5

@Colin que depende del idioma. En C#, puede formatear un objeto 'DateTime' con' .toString ("o") 'que devuelve una cadena con formato ISO-8601 como se muestra arriba. https://msdn.microsoft.com/en-us/library/zdtaw1bw(v=vs.110).aspx En javascript, es 'new Date(). toISOString()'. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString – Hulvej

1

Usando YYYY-MM-DD hh:mm:ss formato:

var date = new Date('2011-06-29T16:52:48+00:00'); 
date.toString() // "Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)" 

Para la conversión del formato YYYY-MM-DD hh:mm:ss, asegúrese de que su fecha siguen el siguiente ISO 8601 format.

Year: 
    YYYY (eg 1997)  
Year and month: 
    YYYY-MM (eg 1997-07) 
Complete date: 
    YYYY-MM-DD (eg 1997-07-16) 
Complete date plus hours and minutes: 
    YYYY-MM-DDThh:mmTZD (eg 1997-07-16T19:20+01:00)  
Complete date plus hours, minutes and seconds: 
    YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)  
Complete date plus hours, minutes, seconds and a decimal fraction of a second 
    YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00) where: 

YYYY = four-digit year 
MM = two-digit month (01=January, etc.) 
DD = two-digit day of month (01 through 31) 
hh = two digits of hour (00 through 23) (am/pm NOT allowed) 
mm = two digits of minute (00 through 59) 
ss = two digits of second (00 through 59) 
s = one or more digits representing a decimal fraction of a second 
TZD = time zone designator (Z or +hh:mm or -hh:mm) 

cosas importantes a tener en cuenta

  1. debe separar la fecha y la hora por un T, un espacio no funcionará en algunos navegadores
  2. debe establecer la zona horaria usando este formato +hh:mm, utilizando una cadena para una zona horaria (por ejemplo: 'UTC') no funcionará en muchos navegadores. +hh:mm representan el desplazamiento de la zona horaria UTC.
5

Ésta es una solución simplificada basada en Adorján Princ's respuesta:

function convertUTCDateToLocalDate(date) { 
    var newDate = new Date(date); 
    newDate.setMinutes(date.getMinutes() - date.getTimezoneOffset()); 
    return newDate; 
} 

Uso:

var date = convertUTCDateToLocalDate(new Date(date_string_you_received)); 
+0

¿Por qué se bajó la validez el 9 de octubre de 2017? Por favor escribe un comentario para ayudarme a entender tu opinión. – huha

3
cadena de fecha

Un JSON (serializado en C#) se parece a "2015-10 -13T18: 58: 17 ".

En angular, (siguiendo Hulvej) hacer un filtro de localdate:

myFilters.filter('localdate', function() { 
    return function(input) { 
     var date = new Date(input + '.000Z'); 
     return date; 
    }; 
}) 

A continuación, mostrar la hora local, como:

{{order.createDate | localdate | date : 'MMM d, y h:mm a' }} 
3

En caso de que no les importa usar moment.js y su tiempo es en UTC sólo tiene que utilizar el siguiente:

moment.utc('6/29/2011 4:52:48 PM').toDate(); 

si su tiempo no es en UTC, pero cualquier otro lugar conocido a usted, a continuación, utilizar las siguientes:

moment('6/29/2011 4:52:48 PM', 'MM-DD-YYYY', 'fr').toDate(); 

si su tiempo es ya a nivel local, a continuación, utilizar lo siguiente:

moment('6/29/2011 4:52:48 PM', 'MM-DD-YYYY'); 
0

escribí un pequeño script agradable que lleva a una época UTC y conversos (como la función de PHP date) formato s:: es el sistema cliente zona horaria y la devuelve en d/m/YH: i

getTimezoneDate = function (e) { 

    function p(s) { return (s < 10) ? '0' + s : s; }   

    var t = new Date(0); 
    t.setUTCSeconds(e); 

    var d = p(t.getDate()), 
     m = p(t.getMonth()+1), 
     Y = p(t.getFullYear()), 
     H = p(t.getHours()), 
     i = p(t.getMinutes()), 
     s = p(t.getSeconds()); 

    d = [d, m, Y].join('/') + ' ' + [H, i, s].join(':'); 

    return d; 

}; 
5

Después de probar algunos otros publicados aquí sin buenos resultados, esto parecía funcionar para yo:

convertUTCDateToLocalDate: function (date) { 
    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())); 
} 

Y esto funciona a seguir el camino inverso, de fecha local a UTC:

convertLocalDatetoUTCDate: function(date){ 
    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()); 
} 
-1
function getUTC(str) { 
    var arr = str.split(/[- :]/); 
    var utc = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]); 
    utc.setTime(utc.getTime() - utc.getTimezoneOffset()*60*1000) 
    return utc; 
} 

Para otras personas que visitan - utilizar esta función para obtener un objeto de fecha local de una cadena UTC , debe ocuparse de DST y funcionará en IE, iPhone etc.

Dividimos la cadena (Como el análisis de fecha JS no es compatible con algunos navegadores) Obtenemos una diferencia de UTC y la restamos de la hora UTC, que nos da hora local. Como la compensación devuelta se calcula con DST (corríjame si estoy equivocado), entonces volverá a establecer ese tiempo en la variable "utc". Finalmente devuelve el objeto de fecha.

1

Esto funciona para mí:

function convertUTCDateToLocalDate(date) { 
    var newDate = new Date(date.getTime() - date.getTimezoneOffset()*60*1000); 
    return newDate; 
} 
0

Para mí soluciones anteriores no funcionaron.

Con IE, la conversión de hora UTC a local es poco complicada. Para mí, la fecha y hora de la API web es '2018-02-15T05:37:26.007' y quería convertir según la zona horaria local, así que usé el código siguiente en JavaScript.

var createdDateTime = new Date('2018-02-15T05:37:26.007' + 'Z'); 
Cuestiones relacionadas