Comment convertir une date JavaScript en UTC?

Supposons qu'un utilisateur de votre site Web entre une plage de dates.

2009-1-1 to 2009-1-3

Vous devez envoyer cette date à un serveur pour un traitement, mais le serveur s'attend à ce que toutes les dates et heures soient en UTC.

Supposons maintenant que l'utilisateur se trouve en Alaska, à Hawaï ou aux Fidji. Puisqu'ils sont dans un fuseau horaire assez différent de l'UTC, la plage de dates doit être convertie en quelque chose comme ceci:

2009-1-1T8:00:00 to 2009-1-4T7:59:59

À l'aide de l'objet Date JavaScript, comment convertiriez-vous la première plage de dates "localisée" en quelque chose que le serveur comprendra?

La toISOString()méthode renvoie une chaîne au format ISO étendu simplifié ( ISO 8601 ), qui est toujours de 24 ou 27 caractères ( YYYY-MM-DDTHH:mm:ss.sssZou ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectivement). Le fuseau horaire est toujours un décalage UTC nul, comme indiqué par le suffixe " Z".

Source: documents Web MDN

Le format dont vous avez besoin est créé avec la .toISOString()méthode. Pour les navigateurs plus anciens (ie8 et moins), qui ne supportent pas nativement cette méthode, le shim peut être trouvé ici :

Cela vous donnera la possibilité de faire ce dont vous avez besoin:

var isoDate = new Date('yourdatehere').toISOString();

Pour le travail de fuseau horaire, moment.js et moment.js timezone sont des outils vraiment précieux ... en particulier pour naviguer dans les fuseaux horaires entre le client et le serveur javascript.

Simple et stupide

var date = new Date(); 
var now_utc =  Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
 date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());

 return new Date(now_utc);

Voici ma méthode:

var now = new Date();
var utc = new Date(now.getTime() + now.getTimezoneOffset() * 60000);

L' utcobjet résultant n'est pas vraiment une date UTC, mais une date locale décalée pour correspondre à l'heure UTC (voir commentaires). Cependant, en pratique, il fait le travail.

Date.prototype.toUTCArray= function(){
    var D= this;
    return [D.getUTCFullYear(), D.getUTCMonth(), D.getUTCDate(), D.getUTCHours(),
    D.getUTCMinutes(), D.getUTCSeconds()];
}

Date.prototype.toISO= function(){
    var tem, A= this.toUTCArray(), i= 0;
    A[1]+= 1;
    while(i++<7){
        tem= A[i];
        if(tem<10) A[i]= '0'+tem;
    }
    return A.splice(0, 3).join('-')+'T'+A.join(':');    
}

Convertir en ISO sans changer la date / l'heure

var now = new Date(); // Fri Feb 20 2015 19:29:31 GMT+0530 (India Standard Time) 
var isoDate = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString();
//OUTPUT : 2015-02-20T19:29:31.238Z

Convertir en ISO avec changement de date / heure (la date / heure sera modifiée)

isoDate = new Date(now).toISOString();
//OUTPUT : 2015-02-20T13:59:31.238Z 

Lien violon

Les navigateurs peuvent différer, et vous devez également vous rappeler de ne pas faire confiance aux informations générées par le client, cela étant dit, la déclaration ci-dessous fonctionne pour moi (Google Chrome v24 sur Mac OS X 10.8.2)

var utcDate = new Date(new Date().getTime());

edit: "En quoi est-ce différent de juste new Date()?" voir ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

• Si aucun argument n'est fourni, le constructeur crée un objet Date JavaScript pour la date et l'heure actuelles en fonction des paramètres système.
• Remarque: Lorsque Date est appelé en tant que constructeur avec plusieurs arguments, les arguments spécifiés représentent l'heure locale. Si UTC est souhaité, utilisez une nouvelle date ( Date.UTC (...) ) avec les mêmes arguments. (note: Date.UTC () renvoie le nombre de millisecondes depuis 1970-01-01 00:00:00 UTC)

L'ajout du 60000 * Date.getTimezoneOffset () comme les réponses précédentes l'ont indiqué est incorrect. Tout d'abord, vous devez considérer toutes les dates / heures comme étant déjà UTC avec un modificateur de fuseau horaire à des fins d'affichage.

Encore une fois, les navigateurs peuvent différer, cependant, Date.getTime () renvoie le nombre de millisecondes depuis le 01-01-1970 UTC / GMT. Si vous créez une nouvelle date en utilisant ce numéro comme je le fais ci-dessus, ce sera UTC / GMT. Cependant, si vous l'affichez en appelant .toString (), il semblera être dans votre fuseau horaire local car .toString () utilise votre fuseau horaire local, pas le fuseau horaire de l'objet Date auquel il est appelé.

J'ai également constaté que si vous appelez .getTimezoneOffset () à une date, il retournera votre fuseau horaire local, pas le fuseau horaire de l'objet de date sur lequel vous l'avez appelé (je ne peux pas vérifier que ce soit standard cependant).

Dans mon navigateur, l'ajout de 60000 * Date.getTimezoneOffset () crée un DateTime qui n'est pas UTC . Cependant, lorsqu'il est affiché dans mon navigateur (ex: .toString ()), il affiche un DateTime dans mon fuseau horaire local qui serait l'heure UTC correcte si les informations de fuseau horaire sont ignorées.

var myDate = new Date(); // Set this to your date in whichever timezone.
var utcDate = myDate.toUTCString();

Une autre solution pour convertir en UTC et le conserver en tant qu'objet date: (Cela fonctionne en supprimant la partie 'GMT' de la fin de la chaîne formatée, puis en la replaçant dans le constructeur Date)

var now = new Date();
var now_utc = new Date(now.toUTCString().slice(0, -4));

J'avais besoin de le faire pour interfacer avec une bibliothèque de sélecteur datetime. Mais en général, c'est une mauvaise idée de travailler avec des dates de cette façon.

Les utilisateurs souhaitent généralement travailler avec les datetimes dans leur heure locale, vous devez donc soit mettre à jour le code côté serveur pour analyser correctement les chaînes datetime avec les décalages, puis convertir en UTC (meilleure option) ou vous convertir en une chaîne UTC côté client avant d'envoyer au serveur (comme dans la réponse de Will Stern)

Essayez-vous de convertir la date en une chaîne comme celle-ci?

Je ferais une fonction pour le faire, et, bien que ce soit légèrement controversé, je l'ajouterais au prototype Date. Si vous n'êtes pas à l'aise avec cela, vous pouvez le mettre en tant que fonction autonome, en passant la date comme paramètre.

Date.prototype.getISOString = function() {
    var zone = '', temp = -this.getTimezoneOffset() / 60 * 100;
    if (temp >= 0) zone += "+";
    zone += (Math.abs(temp) < 100 ? "00" : (Math.abs(temp) < 1000 ? "0" : "")) + temp;

    // "2009-6-4T14:7:32+10:00"
    return this.getFullYear()   // 2009
         + "-"
         + (this.getMonth() + 1) // 6
         + "-"
         + this.getDate()       // 4
         + "T"
         + this.getHours()      // 14
         + ":"
         + this.getMinutes()    // 7
         + ":"
         + this.getSeconds()    // 32
         + zone.substr(0, 3)    // +10
         + ":"
         + String(temp).substr(-2) // 00
    ;
};

Si vous en aviez besoin en temps UTC, remplacez simplement toutes les fonctions get * par getUTC *, par exemple: getUTCFullYear, getUTCMonth, getUTCHours ... puis ajoutez simplement "+00: 00" à la fin au lieu du décalage de fuseau horaire de l'utilisateur.

date = '2012-07-28'; stringdate = new Date(date).toISOString();

devrait fonctionner dans la plupart des nouveaux navigateurs. il revient 2012-07-28T00:00:00.000Zsur Firefox 6.0

Ma recommandation lorsque vous travaillez avec des dates est d'analyser la date dans des champs individuels à partir de l'entrée utilisateur. Vous pouvez l'utiliser comme une chaîne complète, mais vous jouez avec le feu.

JavaScript peut traiter différemment deux dates égales dans des formats différents.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Ne faites jamais rien comme:

new Date('date as text');

Une fois que vous avez analysé votre date dans ses champs individuels à partir de la saisie utilisateur, créez un objet date. Une fois l'objet date créé, convertissez-le en UTC en ajoutant le décalage de fuseau horaire. Je ne peux pas souligner combien il est important d'utiliser le décalage par rapport à l'objet date en raison de l'heure d'été (c'est une autre discussion cependant pour montrer pourquoi).

var year = getFullYear('date as text');
var month = getMonth('date as text');
var dayOfMonth = getDate('date as text');

var date = new Date(year, month, dayOfMonth);

var offsetInMs = ((date.getTimezoneOffset() * 60)  // Seconds
                 * 1000);                          //  Milliseconds

var utcDate = new Date(date.getTime + offsetInMs);

Vous pouvez maintenant transmettre la date au serveur en heure UTC. Encore une fois, je recommande fortement de ne pas utiliser de chaînes de date. Soit le transmettre au serveur décomposé à la granularité la plus faible dont vous avez besoin, par exemple année, mois, jour, minute ou comme une valeur comme millisecondes de l'époque unix.

Si vous traitez beaucoup avec des dates, cela vaut la peine d'utiliser moment.js ( http://momentjs.com ). La méthode pour convertir en UTC serait:

moment(yourTime).utc()

Vous pouvez utiliser le format pour changer votre date en n'importe quel format que vous souhaitez:

moment(yourTime).utc().format("YYYY-MM-DD")

Il existe également des options de décalage, mais il existe une bibliothèque complémentaire supplémentaire pour gérer le fuseau horaire ( http://momentjs.com/timezone/ ). La conversion de temps serait aussi simple que ceci:

moment.tz(yourUTCTime, "America/New_York")

Ma solution conserve la même date quel que soit le fuseau horaire défini côté client. Peut-être que quelqu'un le trouvera utile.

Mon cas d'utilisation:

Je crée une application de tâches, où vous définissez la date de votre tâche. Cette date doit rester constante quel que soit le fuseau horaire dans lequel vous vous trouvez.

Exemple. Vous voulez appeler votre ami à 8 h le 25 juin.

Vous créez cette tâche 5 jours avant (20 juin) pendant que vous êtes en Chine.

Puis, le même jour, vous prenez l'avion pour New York pendant quelques jours.

Ensuite, le 25 juin, alors que vous êtes encore à New York, vous vous réveillez à 7h30 (ce qui signifie que vous devriez recevoir une notification de tâche dans 30 minutes (même s'il est 13h30 déjà en Chine où vous étiez lors de la création du tâche)

La tâche ignore donc le fuseau horaire. Cela signifie «Je veux le faire à 8 heures du matin, quel que soit le fuseau horaire dans lequel je serai».

Ce que je fais, c'est de dire «je suppose que vous êtes toujours dans le fuseau horaire de Londres - UTC».

Cela signifie - lorsque l'utilisateur choisit une date dans son fuseau horaire - je convertis cette date en la même date en UTC. c'est à dire. Vous choisissez 8 heures du matin en Chine, mais je le convertis à 8 heures du matin en UTC.

Ensuite - la prochaine fois que vous ouvrirez l'application - je lis la date enregistrée en UTC et la convertis à la même date dans votre fuseau horaire actuel - par exemple. Je convertis 8 h en UTC en 8 h dans le fuseau horaire de New York.

Cette solution signifie que la date peut signifier autre chose en fonction de l'endroit où vous la définissez et de l'endroit où vous la lisez, mais elle reste constante d'une manière qui vous donne l'impression que vous êtes toujours dans le même fuseau horaire.

Écrivons du code:

Premièrement - nous avons 2 fonctions principales pour la conversion de / vers UTC en ignorant le fuseau horaire:

export function convertLocalDateToUTCIgnoringTimezone(date: Date) {
  const timestamp = Date.UTC(
    date.getFullYear(),
    date.getMonth(),
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
    date.getMilliseconds(),
  );

  return new Date(timestamp);
}

export function convertUTCToLocalDateIgnoringTimezone(utcDate: Date) {
  return new Date(
    utcDate.getUTCFullYear(),
    utcDate.getUTCMonth(),
    utcDate.getUTCDate(),
    utcDate.getUTCHours(),
    utcDate.getUTCMinutes(),
    utcDate.getUTCSeconds(),
    utcDate.getUTCMilliseconds(),
  );
}

Ensuite, je sauvegarde / lis cette date comme:

function saveTaskDate(localDate: Date) {
  // I convert your local calendar date so it looks like you've picked it being in UTC somewhere around London
  const utcDate = convertLocalDateToUTCIgnoringTimezone(localDate);
  api.saveTaskDate(utcDate);
}

function readTaskDate(taskUtcDate: Date) {
  // I convert this UTC date to 'look in your local timezone' as if you were now in UTC somewhere around london
  const localDateWithSameDayAsUTC = convertUTCToLocalDateIgnoringTimezone(taskUtcDate);

  // this date will have the same calendar day as the one you've picked previously
  // no matter where you were saving it and where you are now
}

Je viens de découvrir que la version 1.2.3 de date.format.js de Steven Levithan fait exactement ce que je veux. Il vous permet de fournir une chaîne de format pour une date JavaScript et convertira de l'heure locale en UTC. Voici le code que j'utilise maintenant:

// JavaScript dates don't like hyphens!    
var rectifiedDateText = dateText.replace(/-/g, "/");
var d = new Date(rectifiedDateText);

// Using a predefined mask from date.format.js.
var convertedDate = dateFormat(d, 'isoUtcDateTime'); 

J'ai trouvé le plugin de globalisation jQuery analyse de la date du fonctionnait le mieux. D'autres méthodes avaient des problèmes de navigateur et des trucs comme date.js n'avaient pas été mis à jour depuis longtemps.

Vous n'avez pas non plus besoin d'un datePicker sur la page. Vous pouvez simplement appeler quelque chose de similaire à l'exemple donné dans les documents:

$.parseDate('yy-mm-dd', '2007-01-26');

Cette fonction fonctionne à merveille pour moi.

function ParseDateForSave(dateValue) {
    // create a new date object
    var newDate = new Date(parseInt(dateValue.substr(6)));

    // return the UTC version of the date
    return newDate.toISOString();
}

Utilisation de la méthode UTC moment.js ;

const moment = require('moment');
const utc = moment.utc(new Date(string));

var userdate = new Date("2009-1-1T8:00:00Z");
var timezone = userdate.getTimezoneOffset();
var serverdate = new Date(userdate.setMinutes(userdate.getMinutes()+parseInt(timezone)));

Cela vous donnera la date et l'heure UTC appropriées.
C'est parce que le getTimezoneOffset()vous donnera la différence de fuseau horaire en minutes. Je vous recommande de ne pas l'utiliser toISOString()car la sortie sera dans la chaîne Par conséquent, à l'avenir, vous ne pourrez pas manipuler la date

Voici ce que j'ai fait dans le passé:

var utcDateString = new Date(new Date().toUTCString()).toISOString();

Si vous avez besoin d'un objet Date

Passage de la chaîne de date uniquement La date suppose que l'heure soit 00:00 décalée par fuseau horaire:

new Date('2019-03-11')
Sun Mar 10 2019 18:00:00 GMT-0600 (Central Standard Time)

Si vous ajoutez les heures et les minutes actuelles, vous obtenez la date appropriée:

new Date('2019-03-11 ' + new Date().getHours() + ':' + new Date().getMinutes())
Mon Mar 11 2019 04:36:00 GMT-0600 (Central Standard Time)

En regardant votre question, il est clair que vous voulez simplement envoyer la plage de dates à votre backend pour un traitement ultérieur.

Je suppose que vous vous conformez aux directives de données standard qui s'attendent à ce que les données soient dans un format particulier. Par exemple, j'utilise ODATA qui est une API RESTfull qui s'attend à ce que les objets date-heure soient au format: -

AAAA-MM-JJT00: 00: 00.

Cela peut être facilement réalisé via l'extrait de code affiché ci-dessous (veuillez modifier le format selon vos besoins).

var mydate;//assuming this is my date object which I want to expose var UTCDateStr = mydate.getUTCFullYear() + "-" + mydate.getUTCMonth() + "-" + mydate.getUTCDate() + "T00:00:00";

Si par contre, vous êtes dans ma situation où vous avez reçu une date de votre backend, et le navigateur la convertit en votre date locale. Vous êtes en revanche intéressé par la date UTC alors vous pouvez effectuer les opérations suivantes: -

var mydate;//assuming this is my date object which I want to expose var UTCDate = new Date(mydate);/*create a copy of your date object. Only needed if you for some reason need the original local date*/ UTCDate.setTime(UTCDate.getTime() + UTCDate.getTimezoneOffset() * 60 * 1000);

L'extrait de code ci-dessus ajoute / soustrait essentiellement le temps ajouté / soustrait par le navigateur en fonction du fuseau horaire.

Par exemple, si je suis en EST (GMT-5) et que mon service renvoie un objet date-heure = mer 17 août 2016 00:00:00 GMT-0500, mon navigateur soustrait automatiquement le décalage de fuseau horaire (5 heures) pour obtenir mon heure locale. Donc, si j'essaie de récupérer l'heure, je reçois le mer. 16 août 2016 19:00:00 GMT-0500. Cela pose beaucoup de problèmes. Il y a beaucoup de bibliothèques qui faciliteront certainement cela, mais je voulais partager l'approche JS pure.

Pour plus d'informations, veuillez consulter: http://praveenlobo.com/blog/how-to-convert-javascript-local-date-to-utc-and-utc-to-local-date/ où j'ai obtenu mon inspiration.

J'espère que cela t'aides!

Cette méthode vous donnera: 2017-08-04T11:15:00.000+04:30et vous pouvez ignorer la variable de zone pour obtenir simplement 2017-08-04T11:15:00.000.

function getLocalIsoDateTime(dtString) {
    if(dtString == "")
        return "";
    var offset = new Date().getTimezoneOffset();
    var localISOTime = (new Date(new Date(dtString) - offset * 60000 /*offset in milliseconds*/)).toISOString().slice(0,-1);
    //Next two lines can be removed if zone isn't needed.
    var absO = Math.abs(offset);
    var zone = (offset < 0 ? "+" : "-") + ("00" + Math.floor(absO / 60)).slice(-2) + ":" + ("00" + (absO % 60)).slice(-2);
    return localISOTime + zone;
}

En utilisant le package moment, vous pouvez facilement convertir une chaîne de date UTC en un nouvel objet Date:

const moment = require('moment');
let b = new Date(moment.utc('2014-02-20 00:00:00.000000'));
let utc = b.toUTCString();
b.getTime();

Cela est particulièrement utile lorsque votre serveur ne prend pas en charge le fuseau horaire et que vous souhaitez stocker la date UTC toujours dans le serveur et la récupérer en tant que nouvel objet Date. Le code ci-dessus a fonctionné pour mon exigence de problème similaire auquel ce thread est destiné. Partager ici pour qu'il puisse aider les autres. Je ne vois pas exactement la solution ci-dessus dans aucune réponse. Merci.

const event = new Date ();

console.log (event.toUTCString ());

Je sais que cette question est ancienne, mais examinait ce même problème, et une option serait d'envoyer à la place date.valueOf () au serveur. la fonction valueOf () de la date javascript envoie le nombre de millisecondes depuis le 1er janvier 1970 à minuit UTC.

valeur de()

C'est donc la façon dont je devais le faire parce que je voulais toujours qu'un objet de date JavaScript soit manipulé comme une date et, malheureusement, beaucoup de ces réponses vous obligent à aller dans une chaîne.

//First i had a string called stringDateVar that i needed to convert to Date
var newDate = new Date(stringDateVar)

//output: 2019-01-07T04:00:00.000Z
//I needed it 2019-01-07T00:00:00.000Z because i had other logic that was dependent on that 

var correctDate = new Date(newDate.setUTCHours(0))

//This will output 2019-01-07T00:00:00.000Z on everything which allows scalability 

fil ajouter moment

import moment from 'moment';

//local Js date to UTC using moment
const utcDate = moment.utc(moment(new date()).format('YYYY-MM-DDTHH:mm:ss')).valueOf();
console.log('UTC Date', utcDate);


// UTC to local date without moment
const localDate = convertUTCDateToLocalDate(new Date(utcDate))
console.log('UTC Date', moment(localDate).format('MMM D, YYYY HH:mm'));


function convertUTCDateToLocalDate(date) {

   let newDate = new Date(date.getTime() + date.getTimezoneOffset()*60*1000);

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

   newDate.setHours(hours - offset);

   return newDate;

}

Encore plus simple

myvar.setTime(myvar.getTime() + myvar.getTimezoneOffset() * 60000);