Comment initialiser une date JavaScript à un fuseau horaire particulier

J'ai la date et l'heure dans un fuseau horaire particulier sous forme de chaîne et je souhaite la convertir en heure locale. Mais, je ne sais pas comment définir le fuseau horaire dans l'objet Date.

Par exemple, j'ai Feb 28 2013 7:00 PM ET,alors je peux

var mydate = new Date();
mydate.setFullYear(2013);
mydate.setMonth(02);
mydate.setDate(28);
mydate.setHours(7);
mydate.setMinutes(00);  

Pour autant que je sache, je peux régler l'heure UTC ou l'heure locale. Mais comment régler l'heure dans un autre fuseau horaire?

J'ai essayé d'utiliser l'ajout / soustraction du décalage de l'UTC mais je ne sais pas comment contrer l'heure d'été. Je ne sais pas si je vais dans la bonne direction.

Comment puis-je convertir du temps d'un fuseau horaire différent en heure locale en javascript?

Contexte

L' Dateobjet JavaScript suit le temps en UTC en interne, mais accepte généralement les entrées et produit des sorties à l'heure locale de l'ordinateur sur lequel il s'exécute. Il a très peu d'installations pour travailler avec le temps dans d'autres fuseaux horaires.

La représentation interne d'un Dateobjet est un nombre unique, représentant le nombre de millisecondes qui se sont écoulées depuis 1970-01-01 00:00:00 UTC, sans tenir compte des secondes intercalaires. Aucun fuseau horaire ni format de chaîne n'est stocké dans l'objet Date lui-même. Lorsque diverses fonctions de l' Dateobjet sont utilisées, le fuseau horaire local de l'ordinateur est appliqué à la représentation interne. Si la fonction produit une chaîne, les informations locales de l'ordinateur peuvent être prises en considération pour déterminer comment produire cette chaîne. Les détails varient selon la fonction et certains sont spécifiques à l'implémentation.

Les seules opérations que l' Dateobjet peut effectuer avec des fuseaux horaires non locaux sont:

• Il peut analyser une chaîne contenant un décalage UTC numérique à partir de n'importe quel fuseau horaire. Il l'utilise pour ajuster la valeur analysée et stocke l'équivalent UTC. L'heure locale et le décalage d'origine ne sont pas conservés dans l' Dateobjet résultant . Par exemple:

  var d = new Date("2020-04-13T00:00:00.000+08:00");
  d.toISOString()  //=> "2020-04-12T16:00:00.000Z"
  d.valueOf()      //=> 1586707200000  (this is what is actually stored in the object)

• Dans les environnements qui ont implémenté l' API d'internationalisation ECMASCript (alias "Intl"), un Dateobjet peut produire une chaîne spécifique aux paramètres régionaux ajustée à un identifiant de fuseau horaire donné. Ceci est accompli via l' timeZoneoption to toLocaleStringet ses variations. La plupart des implémentations prendront en charge les identifiants de fuseau horaire IANA, tels que 'America/New_York'. Par exemple:

  var d = new Date("2020-04-13T00:00:00.000+08:00");
  d.toLocaleString('en-US', { timeZone: 'America/New_York' })
  //=> "4/12/2020, 12:00:00 PM"
  // (midnight in China on Apring 13th is noon in New York on April 12th)

  La plupart des environnements modernes prennent en charge l'ensemble complet des identificateurs de fuseau horaire IANA ( voir le tableau de compatibilité ici ). Cependant, gardez à l'esprit que le seul identifiant requis pour être pris en charge par Intl est 'UTC', vous devez donc vérifier attentivement si vous devez prendre en charge les navigateurs plus anciens ou les environnements atypiques (par exemple, les appareils IoT légers).

Bibliothèques

Il existe plusieurs bibliothèques qui peuvent être utilisées pour travailler avec des fuseaux horaires. Bien qu'ils ne puissent toujours pas faire en sorte que l' Dateobjet se comporte différemment, ils implémentent généralement la base de données de fuseau horaire IANA standard et fournissent des fonctions pour l'utiliser en JavaScript. Les bibliothèques modernes utilisent les données de fuseau horaire fournies par l'API Intl, mais les bibliothèques plus anciennes ont généralement des frais généraux, surtout si vous utilisez un navigateur Web, car la base de données peut devenir un peu volumineuse. Certaines de ces bibliothèques vous permettent également de réduire de manière sélective l'ensemble de données, selon les fuseaux horaires pris en charge et / ou la plage de dates avec lesquelles vous pouvez travailler.

Voici les bibliothèques à considérer:

Bibliothèques basées sur Internet

Les nouveaux développements doivent choisir l'une de ces implémentations, qui s'appuient sur l'API Intl pour leurs données de fuseau horaire:

• Luxon (successeur de Moment.js )
• date-fns-tz (extension pour date-fns )

Bibliothèques non internationales

Ces bibliothèques sont maintenues, mais portent le fardeau de regrouper leurs propres données de fuseau horaire, qui peuvent être assez volumineuses.

• js-joda / timezone (extension pour js-joda )
• moment-timezone * (extension pour Moment.js )
• date-fns-timezone (extension pour les anciens 1.x de date-fns )
• BigEasy / TimeZone
• tz.js

* Alors que Moment et Moment-Timezone étaient précédemment recommandés, l'équipe Moment préfère désormais que les utilisateurs choisissent Luxon pour un nouveau développement.

Bibliothèques abandonnées

Ces bibliothèques ont été officiellement fermées et ne devraient plus être utilisées.

• WallTime-js
• TimeZoneJS

Propositions futures

La proposition temporelle TC39 vise à fournir un nouvel ensemble d'objets standard pour travailler avec les dates et les heures dans le langage JavaScript lui-même. Cela inclura la prise en charge d'un objet sensible au fuseau horaire.

Comme l'a dit Matt Johnson

Si vous pouvez limiter votre utilisation aux navigateurs Web modernes, vous pouvez désormais effectuer les opérations suivantes sans bibliothèques spéciales:

new Date().toLocaleString("en-US", {timeZone: "America/New_York"})

Ce n'est pas une solution complète, mais cela fonctionne pour de nombreux scénarios qui nécessitent uniquement une conversion de sortie (de l'heure UTC ou locale vers un fuseau horaire spécifique, mais pas dans l'autre sens).

Ainsi, bien que le navigateur ne puisse pas lire les fuseaux horaires IANA lors de la création d'une date, ou dispose de méthodes pour modifier les fuseaux horaires sur un objet Date existant, il semble y avoir un hack autour de lui:

function changeTimezone(date, ianatz) {

  // suppose the date is 12:00 UTC
  var invdate = new Date(date.toLocaleString('en-US', {
    timeZone: ianatz
  }));

  // then invdate will be 07:00 in Toronto
  // and the diff is 5 hours
  var diff = date.getTime() - invdate.getTime();

  // so 12:00 in Toronto is 17:00 UTC
  return new Date(date.getTime() + diff);

}

// E.g.
var there = new Date();
var here = changeTimezone(there, "America/Toronto");

console.log(`Here: ${here.toString()}\nToronto: ${there.toString()}`);

Vous pouvez spécifier un décalage de fuseau horaire sur new Date(), par exemple:

new Date('Feb 28 2013 19:00:00 EST')

ou

new Date('Feb 28 2013 19:00:00 GMT-0500')

Depuis le Datestockage de l'heure UTC (c'est-à-dire getTimeretourne en UTC), javascript convertira l'heure en UTC, et lorsque vous appelez des choses comme toStringjavascript convertira l'heure UTC en fuseau horaire local du navigateur et renverra la chaîne dans le fuseau horaire local, c'est-à-dire si j'utilise UTC+8:

> new Date('Feb 28 2013 19:00:00 GMT-0500').toString()
< "Fri Mar 01 2013 08:00:00 GMT+0800 (CST)"

Vous pouvez également utiliser la getHours/Minute/Secondméthode normale :

> new Date('Feb 28 2013 19:00:00 GMT-0500').getHours()
< 8

(Cela 8signifie qu'une fois l'heure convertie en heure locale UTC+8, le nombre d'heures est 8.)

Cela devrait résoudre votre problème, n'hésitez pas à proposer des correctifs. Cette méthode tiendra également compte de l'heure d'été pour la date indiquée.

dateWithTimeZone = (timeZone, year, month, day, hour, minute, second) => {
  let date = new Date(Date.UTC(year, month, day, hour, minute, second));

  let utcDate = new Date(date.toLocaleString('en-US', { timeZone: "UTC" }));
  let tzDate = new Date(date.toLocaleString('en-US', { timeZone: timeZone }));
  let offset = utcDate.getTime() - tzDate.getTime();

  date.setTime( date.getTime() + offset );

  return date;
};

Comment utiliser avec le fuseau horaire et l'heure locale:

dateWithTimeZone("America/Los_Angeles",2019,8,8,0,0,0)

J'ai trouvé que la façon la plus prise en charge pour ce faire, sans se soucier d'une bibliothèque tierce, était getTimezoneOffsetde calculer l'horodatage approprié ou de mettre à jour l'heure, puis d'utiliser les méthodes normales pour obtenir la date et l'heure nécessaires.

var mydate = new Date();
mydate.setFullYear(2013);
mydate.setMonth(02);
mydate.setDate(28);
mydate.setHours(7);
mydate.setMinutes(00);

// ET timezone offset in hours.
var timezone = -5;
// Timezone offset in minutes + the desired offset in minutes, converted to ms.
// This offset should be the same for ALL date calculations, so you should only need to calculate it once.
var offset = (mydate.getTimezoneOffset() + (timezone * 60)) * 60 * 1000;

// Use the timestamp and offset as necessary to calculate min/sec etc, i.e. for countdowns.
var timestamp = mydate.getTime() + offset,
    seconds = Math.floor(timestamp / 1000) % 60,
    minutes = Math.floor(timestamp / 1000 / 60) % 60,
    hours   = Math.floor(timestamp / 1000 / 60 / 60);

// Or update the timestamp to reflect the timezone offset.
mydate.setTime(mydate.getTime() + offset);
// Then Output dates and times using the normal methods.
var date = mydate.getDate(),
    hour = mydate.getHours();

ÉDITER

J'utilisais auparavant des UTCméthodes lors de l'exécution des transformations de date, ce qui était incorrect. En ajoutant le décalage à l'heure, l'utilisation des getfonctions locales retournera les résultats souhaités.

J'ai rencontré un problème similaire avec les tests unitaires (en particulier pour plaisanter lorsque les tests unitaires s'exécutent localement pour créer les instantanés, puis le serveur CI s'exécute (potentiellement) dans un fuseau horaire différent, ce qui entraîne l'échec de la comparaison des instantanés). J'ai moqué notre Dateet certaines des méthodes de soutien comme ceci:

describe('...', () => {
  let originalDate;

  beforeEach(() => {
    originalDate = Date;
    Date = jest.fn(
      (d) => {
        let newD;
        if (d) {
          newD = (new originalDate(d));
        } else {
          newD = (new originalDate('2017-05-29T10:00:00z'));
        }
        newD.toLocaleString = () => {
          return (new originalDate(newD.valueOf())).toLocaleString("en-US", {timeZone: "America/New_York"});
        };
        newD.toLocaleDateString = () => {
          return (new originalDate(newD.valueOf())).toLocaleDateString("en-US", {timeZone: "America/New_York"});
        };
        newD.toLocaleTimeString = () => {
          return (new originalDate(newD.valueOf())).toLocaleTimeString("en-US", {timeZone: "America/New_York"});
        };
        return newD;
      }
    );
    Date.now = () => { return (Date()); };
  });

  afterEach(() => {
    Date = originalDate;
  });

});

Essayez d'utiliser ctoc à partir de npm. https://www.npmjs.com/package/ctoc_timezone

Il a des fonctionnalités simples pour changer les fuseaux horaires (la plupart des fuseaux horaires environ 400) et tous les formats personnalisés que vous souhaitez afficher.

En m'appuyant sur les réponses ci-dessus, j'utilise cette doublure native pour convertir la longue chaîne de fuseau horaire en une chaîne de trois lettres:

var longTz = 'America/Los_Angeles';
var shortTz = new Date().
    toLocaleString("en", {timeZoneName: "short", timeZone: longTz}).
    split(' ').
    pop();

Cela donnera PDT ou PST selon la date fournie. Dans mon cas d'utilisation particulier, développé sur Salesforce (Aura / Lightning), nous sommes en mesure d'obtenir le fuseau horaire de l'utilisateur au format long à partir du backend.

Je sais que c'est 3 ans trop tard, mais peut-être que cela peut aider quelqu'un d'autre parce que je n'ai rien trouvé de tel sauf la bibliothèque moment-fuseau horaire, qui n'est pas exactement la même que celle qu'il demande ici.

J'ai fait quelque chose de similaire pour le fuseau horaire allemand, c'est un peu complexe en raison de l'heure d'été et des années bissextiles où vous avez 366 jours.

cela peut nécessiter un peu de travail avec la fonction "isDaylightSavingTimeInGermany" tandis que différents fuseaux horaires changent à différentes heures, l'heure d'été.

de toute façon, consultez cette page: https://github.com/zerkotin/german-timezone-converter/wiki

les principales méthodes sont les suivantes: convertLocalDateToGermanTimezone convertGermanDateToLocalTimezone

J'ai fait un effort pour le documenter, donc ce ne sera pas si déroutant.

Essayez: date-from-timezone , il résout la date prévue à l'aide de nativement disponible Intl.DateTimeFormat.

J'ai utilisé cette méthode dans l'un de mes projets depuis quelques années déjà, mais c'est maintenant que j'ai décidé de la publier en tant que petit projet OS :)

Peut-être que cela vous aidera

/**
 * Shift any Date timezone.
 * @param {Date} date - Date to update.
 * @param {string} timezone - Timezone as `-03:00`.
 */
function timezoneShifter(date, timezone) {
  let isBehindGTM = false;
  if (timezone.startsWith("-")) {
    timezone = timezone.substr(1);
    isBehindGTM = true;
  }

  const [hDiff, mDiff] = timezone.split(":").map((t) => parseInt(t));
  const diff = hDiff * 60 + mDiff * (isBehindGTM ? 1 : -1);
  const currentDiff = new Date().getTimezoneOffset();

  return new Date(date.valueOf() + (currentDiff - diff) * 60 * 1000);
}



const _now = new Date()
console.log(
  [
    "Here: " + _now.toLocaleString(),
    "Greenwich: " + timezoneShifter(_now, "00:00").toLocaleString(),
    "New York: " + timezoneShifter(_now, "-04:00").toLocaleString(),
    "Tokyo: " + timezoneShifter(_now, "+09:00").toLocaleString(),
    "Buenos Aires: " + timezoneShifter(_now, "-03:00").toLocaleString(),
  ].join('\n')
);

Pour les utilisateurs Ionic, j'ai eu un enfer avec cela car il .toISOString()doit être utilisé avec le modèle html.

Cela saisira la date actuelle, mais peut bien sûr être ajouté aux réponses précédentes pour une date sélectionnée.

Je l'ai réparé en utilisant ceci:

date = new Date();
public currentDate: any = new Date(this.date.getTime() - this.date.getTimezoneOffset()*60000).toISOString();

Le * 60000 indique l'UTC -6 qui est CST donc quel que soit TimeZone nécessaire, le nombre et la différence peuvent être modifiés.

Était confronté au même problème, utilisé celui-ci

Console.log (Date.parse ("13 juin 2018 10:50:39 GMT + 1"));

Il retournera des millisecondes auxquelles vous pouvez vérifier que +100 fuseau horaire initialise l'heure britannique.