Zeigen Sie Datum und Uhrzeit im Gebietsschemaformat und im Zeitversatz des Benutzers an


167

Ich möchte, dass der Server Daten immer in UTC im HTML bereitstellt und JavaScript auf der Client-Site in die lokale Zeitzone des Benutzers konvertiert.

Bonus, wenn ich im Gebietsschema-Datumsformat des Benutzers ausgeben kann.

Antworten:


165

Der kinderleichteste Weg, um mit einem UTC-Datum zu beginnen, besteht darin, ein neues DateObjekt zu erstellen und es mithilfe der setUTC…Methoden auf das gewünschte Datum und die gewünschte Uhrzeit einzustellen.

Dann toLocale…Stringliefern die verschiedenen Methoden eine lokalisierte Ausgabe.

Beispiel:

// This would come from the server.
// Also, this whole block could probably be made into an mktime function.
// All very bare here for quick grasping.
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);

console.log(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
console.log(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004
console.log(d.toLocaleDateString());   // -> 02/28/2004
console.log(d.toLocaleTimeString());   // -> 23:45:26

Einige Referenzen:


1
toLocateDateString()
Gibt

1
Hmm ja, das ist ein ziemlich ernstes Problem. Die Verwendung dieser Methoden funktioniert nicht, wenn das Datum in allen Browsern gleich aussehen soll. Irgendwelche Alternativen bekannt?
Josh Mc

6
Einzeilige Version der obigen Initialisierung:var d = new Date(Date.UTC(2004,1,29,2,45,26));
m1kael

4
Es kann erwägenswert sein, dass Chrome (ab Version 35) das Gebietsschema des Benutzers in den toLocaleString()Funktionen nicht berücksichtigt .
Benno

8
Es tut mir leid, aber diese Methode funktioniert nicht unter (ich bin in Australien). Wenn ich den obigen Code ausführe, wird das Datum im US-Format angezeigt. Darüber hinaus sagt MDN, dass das verwendete Gebietsschema und die Form der zurückgegebenen Zeichenfolge vollständig implementierungsabhängig sind.
Tgrrr

65

Verwenden Sie für neue Projekte einfach moment.js

Diese Frage ist ziemlich alt, daher gab es moment.js zu diesem Zeitpunkt noch nicht, aber für neue Projekte vereinfacht sie Aufgaben wie diese erheblich .

Am besten analysieren Sie Ihre Datumszeichenfolge von UTC wie folgt (erstellen Sie eine ISO-8601- kompatible Zeichenfolge auf dem Server, um konsistente Ergebnisse für alle Browser zu erhalten):

var m = moment("2013-02-08T09:30:26Z");

Verwenden mSie jetzt einfach in Ihrer Anwendung moment.js standardmäßig die lokale Zeitzone für Anzeigevorgänge. Es gibt viele Möglichkeiten, Datums- und Uhrzeitwerte zu formatieren oder Teile davon zu extrahieren.

Sie können sogar ein Momentobjekt im Gebietsschema des Benutzers wie folgt formatieren:

m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us

Um ein moment.js-Objekt in eine andere Zeitzone umzuwandeln (dh weder die lokale noch die UTC-Zeitzone), benötigen Sie die Zeitzonenerweiterung moment.js . Diese Seite hat auch einige Beispiele, es ist ziemlich einfach zu bedienen.


Wie kombinierst du das alles? m.utcOffset (Offset) .format ('LLL') scheint nicht zu funktionieren.
Bart

Sollte Luxon oder Day.js jetzt die vorgeschlagene Bibliothek sein?
Homer

1
Ich schlage vor, hinzuzufügenFor old projects, just use jQuery
Xenos

Funktioniert nicht auf Chrom - zeigt immer noch am / pm an, obwohl die Zeit in den Ländereinstellungen des Computers auf 24h eingestellt ist
vir us

20

Sie können new Date().getTimezoneOffset()/60für die Zeitzone verwenden. Es gibt auch eine toLocaleString()Methode zum Anzeigen eines Datums anhand des Gebietsschemas des Benutzers.

Hier ist die ganze Liste: Arbeiten mit Daten


toLocaleString ist äußerst unzuverlässig für die Darstellung von Daten in dem Format, das ein Benutzer möglicherweise erwartet. Selbst wenn ISO 402 unterstützt wird, ist es immer noch sehr unzuverlässig und basiert auf einer Sprache, nicht auf einem Gebietsschema.
RobG

@RobG was ist die Lösung statt toLocaleString?
user924

@ user924 - Sie können eine Bibliothek verwenden, es gibt viele zur Auswahl. Das Problem bei toLocaleString besteht darin, dass unterschiedliche Implementierungen unterschiedliche Ergebnisse mit unterschiedlichen Unterstützungsstufen für verschiedene Sprachen und Regionen liefern. ZB ist meine Systemstandardsprache nicht en-US, aber das Standardformat für toLocaleString für einige Browser ist das US-Format, andere respektieren meine Systemsprache. Dies gilt auch für Zeitzonennamen, nur schlimmer, da sie überhaupt nicht standardisiert sind. :-(
RobG

7

Nachdem Sie Ihr Datumsobjekt erstellt haben, finden Sie hier einen Ausschnitt für die Konvertierung:

Die Funktion verwendet ein UTC-formatiertes Datumsobjekt und eine Formatzeichenfolge.
Sie benötigen einen Date.strftimePrototyp.

function UTCToLocalTimeString(d, format) {
    if (timeOffsetInHours == null) {
        timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
    }
    d.setHours(d.getHours() + timeOffsetInHours);

    return d.strftime(format);
}

6
Woher kommst du?
Anuj Pandey

Hat das Festlegen der Stunden Auswirkungen auf die Teile Tag / Datum / Jahr eines Datumsobjekts? Scheint nicht.
ChristoKiwi

1
@ ChristoKiwi - Es wird erwartet, dass der an setHours übergebene Wert eine Ganzzahl ist, die getTimezoneOffset()/60möglicherweise einen Bruch zurückgibt (z. B. gibt ein Indien-Offset von +05: 30 5,5 zurück). Dezimalstellen werden abgeschnitten. Andernfalls werden durch das Einstellen der Stunden andere Werte aktualisiert (setzen Sie die Stunden auf 48 und sehen Sie, was passiert).
RobG

7

In JS gibt es keine einfachen und plattformübergreifenden Möglichkeiten zum Formatieren der lokalen Datums- und Uhrzeitangabe, außer dass jede Eigenschaft wie oben erwähnt konvertiert wird.

Hier ist ein kurzer Hack, mit dem ich das lokale JJJJ-MM-TT erhalte. Beachten Sie, dass dies ein Hack ist, da das Enddatum nicht mehr die richtige Zeitzone hat (Sie müssen also die Zeitzone ignorieren). Wenn ich noch etwas brauche, benutze ich moment.js.

var d = new Date();    
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0,0); 
// 2017-05-09T08:24:26.581Z (but this is not UTC)

Das d.getTimezoneOffset () gibt den Zeitzonenversatz in Minuten zurück, und das d.getTime () ist in ms, daher x 60.000.


1
@VG Ich habe einige weitere Informationen darüber hinzugefügt, woher die 60k kommen. Ich hoffe das hilft.
Jeremy Chone

5

Folgendes habe ich in früheren Projekten verwendet:

var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set.  again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');

4
Dies ist mit ASP.NET-spezifischen Sachen.
ZiggyTheHamster

Zeitzonen-Offsets sind nicht unbedingt ein Vielfaches einer Stunde, daher getTimezoneOffset()/60wird häufig ein Dezimalwert zurückgegeben. Dies gilt insbesondere für Daten vor 1900, bei denen viele Orte in Minuten und Sekunden versetzt waren. Außerdem sind jetzt Javascript-Daten erforderlich, um historische Offsets zu unterstützen. Beispielsweise betrug der Versatz in Moskau 1890 +2: 30: 17. Siehe Browser, Zeitzonen, Chrome 67-Fehler .
RobG

3

Die .getTimezoneOffset()Methode gibt den Zeitzonenversatz in Minuten an und zählt "westwärts" von der GMT / UTC-Zeitzone, was zu einem Versatzwert führt, der negativ ist, wie man es normalerweise gewohnt ist. (Beispiel: Die New Yorker Zeit würde +240 Minuten oder +4 Stunden betragen.)

Um einen normalen Zeitzonenversatz in Stunden zu erhalten, müssen Sie Folgendes verwenden:

var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60

Wichtiges Detail:
Beachten Sie, dass die Sommerzeit in das Ergebnis einbezogen wird - so , was diese Methode gibt Ihnen ist wirklich die Zeit versetzt - nicht die tatsächliche geographische Zeitzone gegenüber .


3

Mit Datum aus PHP-Code habe ich so etwas benutzt ..

function getLocalDate(php_date) {
  var dt = new Date(php_date);
  var minutes = dt.getTimezoneOffset();
  dt = new Date(dt.getTime() + minutes*60000);
  return dt;
}

Wir können es so nennen

var localdateObj = getLocalDate('2015-09-25T02:57:46');

Die Frage betraf JavaScript, nicht PHP.
Pipedreambomb

5
Die Antwort ist nur in Javascript. Es wird in Frage gestellt, dass das Serverdatum in UTC ist. Der Server kann also in jeder Sprache sein.
Also

3

Ich mische die bisherigen Antworten und füge sie hinzu, da ich sie alle lesen und eine Weile zusätzlich untersuchen musste, um eine Datums- / Zeitzeichenfolge von db im lokalen Zeitzonenformat eines Benutzers anzuzeigen.

Die datetime-Zeichenfolge stammt aus einer Python / Django-Datenbank im Format: 2016-12-05T15: 12: 24.215Z

Die zuverlässige Erkennung der Browsersprache in JavaScript scheint nicht in allen Browsern zu funktionieren ( Informationen zum Erkennen der Einstellungen für die Browsersprache finden Sie unter JavaScript ), daher erhalte ich die Browsersprache vom Server.

Python / Django: Sende die Sprache des Anforderungsbrowsers als Kontextparameter:

language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })

HTML: schreibe es in eine versteckte Eingabe:

<input type="hidden" id="browserlanguage" value={{ language }}/>

JavaScript: Wert der versteckten Eingabe abrufen, z. B. en-GB, en-US; q = 0,8, en; q = 0,6 / und dann die erste Sprache in der Liste nur über Ersetzen und regulären Ausdruck übernehmen

const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "$1");

JavaScript: In Datum / Uhrzeit konvertieren und formatieren:

var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);

Siehe: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Das Ergebnis ist (Browsersprache ist en-gb): 05/12/2016, 14:58


3

// new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
var serverDate = new Date(2018, 5, 30, 19, 13, 15); // just any date that comes from server
var serverDateStr = serverDate.toLocaleString("en-US", {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
})
var userDate = new Date(serverDateStr + " UTC");
var locale = window.navigator.userLanguage || window.navigator.language;

var clientDateStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
});

var clientDateTimeStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

console.log("Server UTC date: " + serverDateStr);
console.log("User's local date: " + clientDateStr);
console.log("User's local date&time: " + clientDateTimeStr);


Als Referenz: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (ich brauchte das optionsTeil für meinen Fall)
Xenos

2

Die beste Lösung, auf die ich gestoßen bin, besteht darin, [time display = "llll" datetime = "UTC TIME" /] -Tags zu erstellen und Javascript (jquery) zu verwenden, um es relativ zur Zeit des Benutzers zu analysieren und anzuzeigen.

http://momentjs.com/ Moment.js

wird die Zeit schön anzeigen.


2

Sie können Folgendes verwenden, das den Zeitzonenversatz von GMT in Minuten angibt:

new Date().getTimezoneOffset();

Hinweis: - Diese Funktion gibt eine negative Zahl zurück.



1

Verwenden Sie die Methode toLocaleDateString (), um das Datum in das lokale Datum zu konvertieren.

var date = (new Date(str)).toLocaleDateString(defaultlang, options);

Verwenden Sie die Methode toLocaleTimeString (), um die Zeit in die Ortszeit umzuwandeln.

var time = (new Date(str)).toLocaleTimeString(defaultlang, options);

-12

Ich weiß nicht, wie man das Gebietsschema macht, aber Javascript ist eine clientseitige Technologie.

usersLocalTime = new Date();

enthält die Uhrzeit und das Datum des Kunden (wie von seinem Browser und im weiteren Sinne von dem Computer, auf dem er sitzt) gemeldet. Es sollte trivial sein, die Zeit des Servers in die Antwort einzubeziehen und einige einfache Berechnungen durchzuführen, um den Versatz zu erraten.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.