Convertir l'heure de date UTC en heure de date locale

337

Du serveur, j'obtiens une variable datetime dans ce format: 6/29/2011 4:52:48 PMet elle est en temps UTC. Je veux le convertir à l'heure du navigateur de l'utilisateur actuel en utilisant JavaScript.

Comment cela peut-il être fait en utilisant JavaScript ou jQuery?

Amr Elgarhy
la source
1
Faites attention. C'est un format de date étrange, alors assurez-vous de le spécifier dans la solution que vous utilisez. Si possible, demandez au serveur d'envoyer la date au format ISO.
Michael Scheper

Réponses:

404

Ajoutez 'UTC' à la chaîne avant de la convertir en date 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)"
bain numérique
la source
5
fonction 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 (); }
mat
4
@matt offSet renvoie les minutes, pas les heures, vous devez diviser par 60
bladefist
50
Cela suppose que la partie date de la chaîne respecte la norme américaine mm / dd / YYYY, ce qui n'est évidemment pas le cas en Europe et dans d'autres parties du monde.
AsGoodAsItGets
7
@digitalbath Fonctionne sur Chrome mais ne fonctionne pas sur Firefox.
Ganesh Satpute
138

À mon avis, les serveurs devraient toujours, dans le cas général, renvoyer une date / heure au format ISO 8601 normalisé .

Plus d'infos ici:

Dans ce cas, le serveur retournerait '2011-06-29T16:52:48.000Z'ce qui alimenterait directement l'objet JS Date.

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

Le localDatesera dans la bonne heure locale qui dans mon cas serait deux heures plus tard (heure DK).

Vous n'avez vraiment pas besoin de faire toute cette analyse qui complique simplement les choses, tant que vous êtes cohérent avec le format à attendre du serveur.

Hulvej
la source
1
comment obtenir la date au format iso? Je reçois une date au format UTC avec UTC ajouté à la fin
Deepika
8
@Colin qui dépend de la langue. En C #, vous pouvez formater un DateTimeobjet avec .toString("o")lequel renvoie une chaîne formatée ISO-8601 comme indiqué ci-dessus. msdn.microsoft.com/en-us/library/zdtaw1bw(v=vs.110).aspx En javascript c'est new Date().toISOString(). developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Hulvej
99

Il s'agit d'une solution universelle:

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;   
}

Usage:

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

Affichez la date en fonction du paramètre local du client:

date.toLocaleString();
Adorjan Princz
la source
41
Ne fonctionne pas avec tous les fuseaux horaires. Il y a une bonne raison pour laquelle getTimeZoneOffset est en quelques minutes! geographylists.com/list20d.html
siukurnin
5
@siukurnin. pour gérer un fuseau horaire étrange, utilisez newDate.setTime (date.getTime () + date.getTimezoneOffset () * 60 * 1000)
Guillaume Gendre
18
newDate.setMinutes (date.getMinutes () - date.getTimezoneOffset ()) serait suffisant. En corrige également les heures
Lu55
1
Assez certain que cela ne peut pas fonctionner pour n'importe quel fuseau horaire qui est à 30 minutes? Il semble arrondir à des heures entières.
NickG
2
Cela ne semble pas non plus régler correctement la date lorsque le décalage de fuseau horaire passe à minuit; peut-être parce qu'il n'utilise que setHours qui n'affecte pas la date?
Uniphonic
37

Vous devez obtenir le décalage (UTC) (en minutes) du client:

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

Et puis faites l'ajout ou la soustraction correspondant au temps que vous obtenez du serveur.

J'espère que cela t'aides.

Nobita
la source
2
Qu'en est-il de l'heure d'été?
Rich
26

Pour moi, les solutions ci-dessus n'ont pas fonctionné.

Avec IE, la conversion de date-heure UTC en local est peu délicate. Pour moi, la date-heure de l'API Web est '2018-02-15T05:37:26.007'et je voulais convertir selon le fuseau horaire local, j'ai donc utilisé le code ci-dessous en JavaScript.

var createdDateTime = new Date('2018-02-15T05:37:26.007' + 'Z');
PramodB
la source
21

Mettez cette fonction dans votre tête:

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

Générez ensuite les éléments suivants pour chaque date dans le corps de votre page:

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

Pour supprimer le GMT et le fuseau horaire, modifiez la ligne suivante:

document.write(d.toString().replace(/GMT.*/g,""));
Ben Bryant
la source
20

Cela fonctionne pour moi:

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime() - date.getTimezoneOffset()*60*1000);
    return newDate;   
}
Molp Burnbright
la source
10

Après avoir essayé quelques autres postés ici sans bons résultats, cela a semblé fonctionner pour moi:

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

Et cela fonctionne dans le sens inverse, de la date locale à l'UTC:

convertLocalDatetoUTCDate: function(date){
    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
Uniphonique
la source
1
Moins de code à utiliser new Date(+date + date.getTimezoneOffset() * 6e4). ;-)
RobG
cela ne fonctionnera pas, mon temps en utc est "2020-04-02T11: 09: 00", alors j'ai essayé de Singapour, nouvelle date (+ nouvelle date ("2020-04-02T11: 09: 00") + nouvelle date ( "2020-04-02T11: 09: 00"). GetTimezoneOffset () * 6e4), donnant le mauvais temps
AhammadaliPK
cela a fonctionné, nouvelle date ("2020-04-02T11: 09: 00" + 'Z');
AhammadaliPK
10

Ajoutez le fuseau horaire à la fin, dans ce cas 'UTC':

theDate = new Date( Date.parse('6/29/2011 4:52:48 PM UTC'));

après cela, utilisez les familles de fonctions toLocale () * pour afficher la date dans les paramètres régionaux corrects

theDate.toLocaleString();  // "6/29/2011, 9:52:48 AM"
theDate.toLocaleTimeString();  // "9:52:48 AM"
theDate.toLocaleDateString();  // "6/29/2011"
pabloa98
la source
9

La réponse de Matt ne tient pas au fait que l'heure d'été pourrait être différente entre Date () et l'heure à laquelle il doit être converti - voici ma solution:

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

        var hourOffset = convertdLocalTime.getTimezoneOffset() / 60;

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

        return convertdLocalTime;
    }

Et les résultats dans le débogueur:

UTCDateString: "2014-02-26T00:00:00"
convertdLocalTime: Wed Feb 26 2014 00:00:00 GMT-0800 (Pacific Standard Time)
MaurGi
la source
9

Utilisez-le pour l'UTC et la conversion de l'heure locale et vice versa.

//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;
}
M. Polywhirl
la source
3
ce qui s'est passé à l'heure d'été.
Fuseau
voir ma réponse @ stackoverflow.com/questions/6525538/…
Hulvej
9

Il s'agit d'une solution simplifiée basée sur la réponse d'Adorjan Princ:

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

Usage:

var date = convertUTCDateToLocalDate(new Date(date_string_you_received));
huha
la source
Pourquoi cela a-t-il été rejeté le 9 octobre 2017? Veuillez écrire un commentaire pour m'aider à comprendre votre opinion.
huha
9

Dans le cas où cela ne vous dérange pas d'utiliser moment.jset que votre temps est en UTC, utilisez simplement ce qui suit:

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

si votre heure n'est pas en utc mais en tout autre lieu connu de vous, alors utilisez ce qui suit:

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

si votre heure est déjà en local, utilisez alors:

moment('6/29/2011 4:52:48 PM', 'MM-DD-YYYY');
adnan kamili
la source
5

Pour moi, le plus simple semblait utiliser

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

(Je pensais que la première ligne pourrait être suffisante mais il y a des fuseaux horaires qui sont désactivés en quelques fractions d'heures)

mizuki nakeshu
la source
Quelqu'un at-il des problèmes avec cela? Cela me semble être la meilleure option. J'ai pris une chaîne UTC qui avait "(UTC)" à la fin, je l'ai configurée en tant qu'objet Date en utilisant new Date('date string'), puis j'ai ajouté ces deux lignes et il semble revenir avec une heure basée entièrement sur l'horodatage UTC du serveur avec des ajustements pour l'adapter à l'heure locale de l'utilisateur. Je dois aussi m'inquiéter des étranges fuseaux horaires de fractions d'heure ... Je ne sais pas si ça résiste parfaitement tout le temps ...
tylerl
essayé de nombreuses autres options, aucune d'entre elles n'a fonctionné, mais cela fonctionne
Sameera K
5

Une chaîne de date JSON (sérialisée en C #) ressemble à "2015-10-13T18: 58: 17".

En angulaire, (suivant Hulvej) faites un localdatefiltre:

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

Ensuite, affichez l'heure locale comme:

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

En utilisant le YYYY-MM-DD hh:mm:ssformat:

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

Pour convertir à partir du YYYY-MM-DD hh:mm:ssformat, assurez-vous que votre date respecte le format ISO 8601 .

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)

Choses importantes à noter

  1. Vous devez séparer la date et l'heure par un T, un espace ne fonctionnera pas dans certains navigateurs
  2. Vous devez définir le fuseau horaire en utilisant ce format +hh:mm, en utilisant une chaîne pour un fuseau horaire (ex.: 'UTC') ne fonctionnera pas dans de nombreux navigateurs. +hh:mmreprésentent le décalage par rapport au fuseau horaire UTC.
Gudradain
la source
3

@Adorojan'sla réponse est presque correcte. Mais l'ajout de décalage n'est pas correct car la valeur de décalage sera négative si la date du navigateur est en avance sur GMT et vice versa. Ci-dessous est la solution avec laquelle je suis venu et fonctionne parfaitement bien pour moi:

// Input time in UTC
var inputInUtc = "6/29/2011 4:52:48";

var dateInUtc = new Date(Date.parse(inputInUtc+" UTC"));
//Print date in UTC time
document.write("Date in UTC : " + dateInUtc.toISOString()+"<br>");

var dateInLocalTz = convertUtcToLocalTz(dateInUtc);
//Print date in local time
document.write("Date in Local : " + dateInLocalTz.toISOString());

function convertUtcToLocalTz(dateInUtc) {
		//Convert to local timezone
		return new Date(dateInUtc.getTime() - dateInUtc.getTimezoneOffset()*60*1000);
}

Joe
la source
3

Pour moi, cela fonctionne bien

if (typeof date === "number") {
  time = new Date(date).toLocaleString();
  } else if (typeof date === "string"){
  time = new Date(`${date} UTC`).toLocaleString();
}
C.Lee
la source
2

I Répondre à cette question si quelqu'un souhaite une fonction qui affiche l'heure convertie en élément id spécifique et applique la chaîne de format de date aaaa-mm-jj ici date1 est une chaîne et ids est l'id de l'élément que l'heure va afficher.

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();
            }

Je sais que la réponse a déjà été acceptée, mais je viens ici à cause de Google et j'ai résolu en m'inspirant de la réponse acceptée, donc je voulais simplement la partager si quelqu'un en avait besoin.

Nisarg Desai
la source
1

Basé sur la réponse @digitalbath, voici une petite fonction pour récupérer l'horodatage UTC et afficher l'heure locale dans un élément DOM donné (en utilisant jQuery pour cette dernière partie):

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>
Moriz
la source
0

J'ai écrit un joli petit script qui prend une époque UTC et le convertit en fuseau horaire du système client et le renvoie au format d / m / YH: i: s (comme la fonction de date PHP):

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;

};
John Bell
la source
0

Vous pouvez utiliser momentjs , moment(date).format()donnera toujours le résultat en date locale .

Bonus , vous pouvez formater comme vous le souhaitez. Par exemple.

moment().format('MMMM Do YYYY, h:mm:ss a'); // September 14th 2018, 12:51:03 pm
moment().format('dddd');                    // Friday
moment().format("MMM Do YY"); 

Pour plus de détails, vous pouvez vous référer au site Moment js

AConsommateur
la source
0

Vous pouvez le faire en utilisant le fichier moment.js .

C'est simple, vous venez de mentionner l'emplacement du fuseau horaire.

Exemple: si vous convertissez votre datetime en fuseau horaire Asia / Kolkata, il vous suffit de mentionner le nom du fuseau horaire obtenu à partir de moment.js

var UTCDateTime="Your date obtained from UTC";
var ISTleadTime=(moment.tz(UTCDateTime, "Africa/Abidjan")).tz("Asia/Kolkata").format('YYYY-MM-DD LT');

REvathY M
la source
0

J'ai créé une fonction qui convertit tous les fuseaux horaires en heure locale.

Je n'ai pas utilisé getTimezoneOffset (), car il ne renvoie pas la bonne valeur de décalage

Exigences:

1. npm i moment-timezone

function utcToLocal(utcdateTime, tz) {
    var zone = moment.tz(tz).format("Z") // Actual zone value e:g +5:30
    var zoneValue = zone.replace(/[^0-9: ]/g, "") // Zone value without + - chars
    var operator = zone && zone.split("") && zone.split("")[0] === "-" ? "-" : "+" // operator for addition subtraction
    var localDateTime
    var hours = zoneValue.split(":")[0]
    var minutes = zoneValue.split(":")[1]
    if (operator === "-") {
        localDateTime = moment(utcdateTime).subtract(hours, "hours").subtract(minutes, "minutes").format("YYYY-MM-DD HH:mm:ss")
    } else if (operator) {
        localDateTime = moment(utcdateTime).add(hours, "hours").add(minutes, "minutes").format("YYYY-MM-DD HH:mm:ss")
    } else {
        localDateTime = "Invalid Timezone Operator"
    }
    return localDateTime
}

utcToLocal("2019-11-14 07:15:37", "Asia/Kolkata")

//Returns "2019-11-14 12:45:37"
Rohit Parte
la source
0

Dans mon cas, j'ai dû trouver la différence de dates en quelques secondes. La date était une chaîne de date UTC, je l'ai donc convertie en objet de date local. C'est ce que j'ai fait:

let utc1 = new Date();
let utc2 = null;
const dateForCompare = new Date(valueFromServer);
dateForCompare.setTime(dateForCompare.getTime() - dateForCompare.getTimezoneOffset() * 
 60000);
utc2 = dateForCompare;

const seconds = Math.floor(utc1 - utc2) / 1000;
Suraj Galande
la source
-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;
}

Pour ceux qui visitent - utilisez cette fonction pour obtenir un objet de date locale à partir d'une chaîne UTC, devrait prendre en charge l'heure d'été et fonctionnera sur IE, IPhone, etc.

Nous séparons la chaîne (étant donné que l'analyse de date JS n'est pas prise en charge sur certains navigateurs) Nous obtenons la différence d'UTC et la soustrayons de l'heure UTC, ce qui nous donne l'heure locale. Puisque l'offset retourné est calculé avec DST (corrigez-moi si je me trompe), il remettra donc ce temps dans la variable "utc". Enfin, renvoyez l'objet date.

Dapu
la source
-1

Dans Angular, j'ai utilisé la réponse de Ben de cette façon:

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

Edit: Angular 1.3.0 a ajouté le support UTC au filtre de date, je ne l'ai pas encore utilisé mais cela devrait être plus facile, voici le format:

{{ date_expression | date : format : timezone}}

API de date angulaire 1.4.3

Helzgate
la source