Zeitzonenbasierte Zeiten in JavaScript lokalisieren

Angenommen, Sie haben eine Zeit, die Sie auf Ihrer Website anzeigen möchten. Sie haben sie in Ihrer Zeitzone eingegeben. Sie können immer spezifisch sein und etwas sagen wie: 15:00 Uhr Osteuropäische Zeit. Dann überlassen Sie es dem Leser, dies in seine lokale Zeit umzuwandeln. Jede Zeitzone ist eine großartige Website dafür.

Aber es kann schön sein, die Zeit für den Leser zu lokalisieren. Zeitzonenkonvertierung ist notorisch verwirrend. Und es ist die Art von Sache, die Computer gut können. JavaScript weiß schließlich, in welcher Zeitzone sich der Leser befindet.

Ich bin mir sicher, dass es dafür eine Reihe von Möglichkeiten gibt. Ich musste es kürzlich bei einem neuen Projekt tun und folgte Dave Ruperts Beispiel, der es auf der Website von ShopTalk implementiert hat, um die lokalisierte Zeit für unsere nächste Live-Show anzuzeigen.

Bibliotheken

Moment.js und Moment Timezone sind ein Paar, das dies erledigen kann. Und wenn Sie andere aufwendigere Datums- und Zeitmanipulationen oder relative Berechnungen (z. B. „vor 32 Minuten“, „12. August 2015“) durchführen müssen, sind Sie mit diesen Bibliotheken gut bedient.

Wir müssen auch die Zeitzone selbst erkennen, und glücklicherweise gibt es eine Bibliothek dafür.

Wir werden also verwenden

• jstz.js
• moment.js
• moment-timezone.js

Binden Sie diese Pakete oder Links nach Belieben ein.

Schritt 1: Zeitzone ermitteln

Am besten legen Sie sie nach dem Ermitteln im localStorage ab. Das erfordert beim nächsten Abruf weniger Aufwand für den Browser.

if (!sessionStorage.getItem('timezone')) {
  var tz = jstz.determine() || 'UTC';
  sessionStorage.setItem('timezone', tz.name());
}
var currTz = sessionStorage.getItem('timezone');

Schritt 2: Zeitwert erhalten

Moment erwartet einen Datums-/Zeitwert (in UTC) wie

2015-08-12T14:30Z

Wenn wir nur an der Uhrzeit interessiert sind, können wir den Datumsteil dieses Strings von Moment für das heutige Datum erstellen (das macht die Formatierung einfach viel einfacher). Das Datum spielt tatsächlich eine Rolle wegen UGHGKGJHGH Sommerzeit.

var date = moment().format("YYYY-MM-DD");

Dann erstellen wir den endgültigen String, vorausgesetzt, wir haben eine Variable mit der gewünschten Zeit

var stamp = date + "T" + theTime + "Z";

Und wandeln ihn in ein Moment-Objekt um

var momentTime = moment(stamp);

Schritt 3: Zeit lokalisieren

Jetzt können wir diese Zeit mit Moment Timezone anpassen/lokalisieren

var tzTime = momentTime.tz(currTz);

Und sie für die Anzeige richtig formatieren

var formattedTime = tzTime.format('h:mm A');

Schritt 4: Verwenden

Jetzt können wir sie überall auf der Seite platzieren. Wenn Sie auch die Zeitzone ausgeben, könnten Sie sogar die aktuell auf der Seite ausgegebene Zeit ersetzen, da sie bei einem Fehler bei der Zeitzonenerkennung auf UTC zurückfällt und diese als Zeitzone ausgibt.

output.textContent = "Time in " + currTz + ": " + formattedTime;

Zeiten anpassen

Manchmal ist es sinnvoll (vielleicht aus CMS-Sicht), die Leute aufzufordern, die Zeit in einer lokalen Zeitzone einzugeben. Aber um die Konvertierung korrekt durchzuführen, ist es sinnvoller, diese Zeit in UTC zu haben.

Moment selbst kann bei der Anpassung von Zeiten helfen, z. B.

moment().subtract(4, 'hours');
moment().add(3, 'hours');

Serverseitige Sprachen können ebenfalls helfen. Zum Beispiel kann PHP Berechnungen mit Zeiten durchführen

<?php var $sixHoursAgo = strtotime("-6 hours", time()); ?>

Das macht wahrscheinlich am meisten Sinn mit Moment Timezone, da es nicht immer eine exakte Formel ist (wieder UGHADKGHK Sommerzeit).

Demo

In dieser Demo verwenden wir eine HTML5-Zeiteingabe und passen sie im Handumdrehen an eine lokalisierte Zeit an.

Sehen Sie den Stift Zeiten an lokale Zeitzonen anpassen von Chris Coyier (@chriscoyier) auf CodePen.

Andere Wege

Haben Sie Erfahrungen damit? Wie haben Sie es gehandhabt?

Die hier verwendeten Abhängigkeiten sind nicht unerheblich! Es scheint, dass native JavaScript-Methoden (z. B. getTimezoneOffset()) eine ziemlich gute Unterstützung haben, die für ähnliche Zwecke verwendet werden könnte. Haben Sie Erfahrungen mit der Nutzung dieser?