Wyświetla datę / godzinę w lokalnym formacie użytkownika i przesunięcie czasu

Chcę, aby serwer zawsze podawał daty w formacie UTC w kodzie HTML i aby JavaScript w witrynie klienta był konwertowany na lokalną strefę czasową użytkownika.

Dodatkowa korzyść, jeśli mogę wyświetlać dane w formacie daty użytkownika.

Wydaje się, że najbardziej niezawodnym sposobem rozpoczęcia od daty UTC jest utworzenie nowego Dateobiektu i użycie setUTC…metod w celu ustawienia żądanej daty / godziny.

Następnie różne toLocale…Stringmetody zapewnią zlokalizowane dane wyjściowe.

Przykład:

// 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

Niektóre odniesienia:

• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

W przypadku nowych projektów po prostu użyj momentu.js.

To pytanie jest dość stare, więc moment.js w tamtym czasie nie istniał, ale w przypadku nowych projektów bardzo upraszcza takie zadania.

Najlepiej przeanalizować ciąg daty z UTC w następujący sposób (utwórz na serwerze ciąg zgodny z ISO-8601, aby uzyskać spójne wyniki we wszystkich przeglądarkach):

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

Teraz po prostu użyj mw swojej aplikacji, moment.js domyślnie ustawia lokalną strefę czasową dla operacji wyświetlania. Istnieje wiele sposobów formatowania wartości daty i godziny lub wyodrębniania ich części.

Możesz nawet sformatować obiekt momentu w lokalizacji użytkownika w następujący sposób:

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

Aby przekształcić obiekt moment.js w inną strefę czasową (tj. Ani lokalną, ani UTC), będziesz potrzebować rozszerzenia strefy czasowej moment.js . Ta strona zawiera również kilka przykładów, jest dość prosta w użyciu.

Możesz użyć new Date().getTimezoneOffset()/60dla strefy czasowej. Istnieje również toLocaleString()metoda wyświetlania daty przy użyciu ustawień regionalnych użytkownika.

Oto cała lista: Praca z datami

Gdy masz już skonstruowany obiekt daty, oto fragment kodu konwersji:

Funkcja przyjmuje obiekt Date w formacie UTC i ciąg formatu.
Będziesz potrzebował Date.strftimeprototypu.

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

    return d.strftime(format);
}

W JS nie ma prostych i wieloplatformowych sposobów formatowania lokalnej daty i godziny, poza konwersją każdej właściwości, jak wspomniano powyżej.

Oto szybki hack, którego używam, aby uzyskać lokalny RRRR-MM-DD. Zauważ, że to hack, ponieważ ostateczna data nie będzie już miała poprawnej strefy czasowej (więc musisz zignorować strefę czasową). Jeśli potrzebuję czegoś więcej, używam momentu.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)

D.getTimezoneOffset () zwraca przesunięcie strefy czasowej w minutach, a d.getTime () w ms, stąd x 60 000.

Oto, czego użyłem w poprzednich projektach:

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');

Plik .getTimezoneOffset()Metoda zgłasza strefy czasowej w minutach liczenia „Westwards” ze strefy czasowej GMT / UTC, w wyniku czego wartość odsunięcia, która jest ujemna, co jeden jest powszechnie przyzwyczajeni. (Przykładowo, czas w Nowym Jorku zostanie zgłoszony jako +240 minut lub +4 godziny)

Aby uzyskać normalne przesunięcie strefy czasowej w godzinach, musisz użyć:

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

Ważny szczegół:
Zwróć uwagę, że czas letni jest uwzględniany w wyniku - więc to, co daje ta metoda, to tak naprawdę przesunięcie czasu, a nie rzeczywiste przesunięcie geograficzne strefy czasowej .

Z datą z kodu PHP użyłem czegoś takiego ...

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

Możemy to tak nazwać

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

Do tej pory mieszam odpowiedzi i dodaję do nich, ponieważ musiałem je wszystkie przeczytać i dodatkowo przez chwilę zbadać, aby wyświetlić ciąg daty i czasu z db w lokalnym formacie strefy czasowej użytkownika.

Ciąg daty i godziny pochodzi z bazy danych python / django w formacie: 2016-12-05T15: 12: 24.215Z

Wiarygodne wykrywanie języka przeglądarki w JavaScript wydaje się nie działać we wszystkich przeglądarkach (zobacz JavaScript do wykrywania preferencji językowych przeglądarki ), więc otrzymuję język przeglądarki z serwera.

Python / Django: wyślij żądanie języka przeglądarki jako parametr kontekstu:

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

HTML: napisz to w ukrytym wejściu:

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

JavaScript: pobierz wartość ukrytych danych wejściowych, np. En-GB, en-US; q = 0.8, en; q = 0.6 /, a następnie weź pierwszy język z listy tylko za pomocą zamiany i wyrażenia regularnego

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

JavaScript: przekonwertuj na datetime i sformatuj go:

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

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

Wynik to (język przeglądarki to en-gb): 12.05.2016, 14:58

Najlepszym rozwiązaniem, z jakim się spotkałem, jest utworzenie znaczników [time display = "llll" datetime = "UTC TIME" /] i użycie javascript (jquery) do przeanalizowania i wyświetlenia go w odniesieniu do czasu użytkownika.

http://momentjs.com/ Moment.js

ładnie wyświetli czas.

Możesz użyć poniższego, który podaje przesunięcie strefy czasowej w stosunku do GMT w minutach:

new Date().getTimezoneOffset();

Uwaga: - ta funkcja zwraca liczbę ujemną.

getTimeZoneOffset () i toLocaleString są dobre do podstawowej pracy z datami, ale jeśli potrzebujesz obsługi prawdziwej strefy czasowej, spójrz na TimeZone.js mde .

W odpowiedzi na to pytanie omówiono jeszcze kilka opcji

Aby przekonwertować datę na datę lokalną, użyj metody toLocaleDateString ().

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

Aby przekonwertować czas na czas lokalny, użyj metody toLocaleTimeString ().

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

Nie wiem, jak to zrobić, ale javascript jest technologią po stronie klienta.

usersLocalTime = new Date();

będzie zawierał czas i datę klienta (zgłoszone przez przeglądarkę, a co za tym idzie - komputer, na którym się znajduje). Włączenie czasu serwera do odpowiedzi i wykonanie prostych działań matematycznych w celu zgadnięcia przesunięcia czasu powinno być trywialne.