web-dev-qa-db-fra.com

Conversion de l'heure de la date UTC en heure de la date locale

Sur le serveur, je reçois une variable datetime dans ce format: 6/29/2011 4:52:48 PM et elle est en heure UTC Je souhaite le convertir en temps réel dans le navigateur de l’utilisateur actuel à l’aide de JavaScript.

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

javascriptjquerydatetimetimezoneutc
254
Amr Elgarhy

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)"
313
digitalbath

De mon point de vue, les serveurs doivent toujours, dans le cas général, renvoyer une date/heure au format format ISO 8601 normalisé.

Plus d'infos ici:

Dans ce cas, le serveur renverrait '2011-06-29T16:52:48.000Z' 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);

La localDate sera à la bonne heure locale qui dans mon cas serait deux heures plus tard (heure NSP).

Vous vraiment n'avez pas à effectuer toute cette analyse qui ne fait que compliquer les choses, tant que vous êtes cohérent avec le format à attendre du serveur.

88
Hulvej

C'est 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();
85
Adorjan Princz

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

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

Ensuite, le correspondant ajoute ou soustrait à l'heure que vous obtenez du serveur. 

J'espère que cela t'aides.

32
Nobita

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 l’heure GMT et le fuseau horaire, modifiez la ligne suivante:

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

Pour moi, les solutions ci-dessus ne fonctionnaient pas.

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

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

Après avoir essayé quelques autres postés ici sans de 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 pour aller dans le sens opposé, de Date locale à UTC:

convertLocalDatetoUTCDate: function(date){
    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
10
Uniphonic

Utilisez ceci pour convertir l'heure UTC et 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;
}
9
user3560410

Dans le cas où cela ne vous dérangerait pas d'utilisermoment.js et que votre temps est en UTC, utilisez ce qui suit:

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

si votre temps n’est pas en utc mais en tout autre lieu que vous connaissez, utilisez les méthodes suivantes:

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

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

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

La réponse de Matt manque le fait que l'heure d'été pourrait être différente entre Date () et l'heure à laquelle elle doit être convertie. 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)
7
MaurGi

Cela fonctionne pour moi:

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

Voici 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));
6
huha

Pour moi, le plus simple semblait utiliser

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

(Je pensais que la première ligne pourrait suffire mais il y a des fuseaux horaires décalés en fractions d'heure)

4
mizuki nakeshu

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

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

ensuite, utiliseztoLocale () * familles de fonctions pour afficher la date dans les paramètres régionaux appropriés 

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

Utiliser le format YYYY-MM-DD hh:mm:ss:

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 format YYYY-MM-DD hh:mm:ss, 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)

Points importants à noter

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

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

Dans angular, (après Hulvej) créez un filtre localdate:

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

Ensuite, affichez l'heure locale comme suit:

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

Je réponds à ce si Si quelqu'un veut une fonction qui affiche l'heure convertie en élément id spécifique et applique la chaîne de format de date yyyy-mm-jjhere date1 est une chaîne et ids est l'identifiant 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 cette réponse a déjà été acceptée, mais j'arrive ici à cause de google et j'ai résolu l'inspiration à partir de la réponse acceptée, alors je voulais simplement la partager si quelqu'un en avait besoin.

2
Nisarg Desai

@Adorojan's answer est presque correct. 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 inversement ... Voici la solution avec laquelle je suis venu et qui fonctionne parfaitement 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);
}

1
Joe

Sur la base de la réponse @digitalbath, voici une petite fonction permettant de saisir l’horodatage UTC et d’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>
1
Moriz

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

Bonus, vous pouvez formater à votre guise. Pour 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 consulter Site Web Moment js

1
Shivendra Gupta

Pour moi, ça marche bien

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

J'ai écrit un joli petit script qui prend une époque UTC et le convertit dans le fuseau horaire du système client, puis le renvoie au format j/m/A H: i: s (comme la fonction PHP date):

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;

};
0
John Bell

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

C'est simple, vous venez de mentionner la place du fuseau horaire.

Exemple: si vous voulez convertir votre date/heure en fuseau horaire Asie/Kolkata, vous devez simplement mentionner le nom du lieu du fuseau horaire obtenu 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');
0
REvathY M