Visualizza data/ora nel formato locale dell'utente e offset temporale

Question

Desidero che il server fornisca sempre le date in UTC nell'HTML e che JavaScript sul sito del client le converta nel fuso orario locale dell'utente.

Bonus se riesco a produrre l'output nel formato data locale dell'utente.

Answer 1

Sembra che il modo più infallibile per iniziare con una data UTC sia crearne una nuova Date oggetto e utilizzare il setUTC… metodi per impostarlo sulla data/ora desiderata.

Poi i vari toLocale…String i metodi forniranno output localizzato.

Esempio:

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

Alcuni riferimenti:

• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Answer 2

Per i nuovi progetti, basta usare momento.js

Questa domanda è piuttosto vecchia, quindi momento.js non esisteva a quel tempo, ma per i nuovi progetti semplifica molto compiti come questo.

È meglio farlo analizzare la stringa della data da UTC come segue (crea un file ISO-8601 stringa compatibile sul server per ottenere risultati coerenti su tutti i browser):

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

Ora usa e basta m nella tua applicazione, moment.js utilizza per impostazione predefinita il fuso orario locale per le operazioni di visualizzazione.Ci sono molti modi per formattare i valori di data e ora o estrarne porzioni.

Puoi anche formattare un oggetto momento nelle impostazioni locali dell'utente in questo modo:

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

Per trasformare un oggetto moment.js in un fuso orario diverso (ad es.né quello locale né l'UTC), ti servirà il file estensione del fuso orario moment.js.Quella pagina ha anche alcuni esempi, è piuttosto semplice da usare.

Answer 3

Puoi usare new Date().getTimezoneOffset()/60 per il fuso orario.C'è anche un toLocaleString() metodo per visualizzare una data utilizzando le impostazioni internazionali dell'utente.

Ecco l'elenco completo: Lavorare con le date

Answer 4

Una volta costruito l'oggetto data, ecco uno snippet per la conversione:

La funzione accetta un oggetto Date in formato UTC e una stringa di formato.
Avrai bisogno di un Date.strftime prototipo.

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

    return d.strftime(format);
}

Answer 5

In JS non esistono modi semplici e multipiattaforma per formattare la data e l'ora locali, a parte la conversione di ciascuna proprietà come menzionato sopra.

Ecco un trucco veloce che utilizzo per ottenere il formato AAAA-MM-GG locale.Tieni presente che questo è un trucco, poiché la data finale non avrà più il fuso orario corretto (quindi devi ignorare il fuso orario).Se ho bisogno di qualcos'altro, utilizzo 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)

d.getTimezoneOffset() restituisce l'offset del fuso orario in minuti e d.getTime() è in ms, da qui x 60.000.

Answer 6

Ecco cosa ho usato nei progetti passati:

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

Answer 7

IL .getTimezoneOffset() Il metodo riporta l'offset del fuso orario in minuti, contando "verso ovest" dal fuso orario GMT/UTC, risultando in un valore di offset negativo rispetto a quello a cui si è comunemente abituati.(Esempio, l'ora di New York verrebbe indicata come +240 minuti o +4 ore)

Per ottenere una normale differenza di fuso orario in ore, è necessario utilizzare:

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

Dettaglio importante:
Tieni presente che nel risultato viene presa in considerazione l'ora legale, quindi ciò che ti offre questo metodo è davvero quello tempo offset - non l'effettiva area geografica fuso orario compensare.

Answer 8

Con la data del codice PHP ho usato qualcosa del genere..

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

Possiamo chiamarlo così

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

Answer 9

Ho mescolato le risposte finora e le ho aggiunte, perché ho dovuto leggerle tutte e indagare ulteriormente per un po' per visualizzare una stringa di data e ora da db nel formato del fuso orario locale di un utente.

La stringa datetime proviene da un db python/django nel formato:12/05/2016 15:12:24

Il rilevamento affidabile della lingua del browser in JavaScript non sembra funzionare in tutti i browser (vedi JavaScript per rilevare la preferenza della lingua del browser), quindi ottengo la lingua del browser dal server.

Pitone/Django:invia la richiesta della lingua del browser come parametro di contesto:

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

HTML:scrivilo in un input nascosto:

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

JavaScript:ottieni il valore dell'input nascosto, ad es.en-GB,en-US;q=0.8,en;q=0.6/ e poi prendi la prima lingua nell'elenco solo tramite sostituzione ed espressione regolare

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

JavaScript:converti in datetime e formattalo:

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

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

Il risultato è (la lingua del browser è en-gb):05/12/2016, 14:58

Answer 10

La soluzione migliore che ho trovato è creare tag [time display="llll" datetime="UTC TIME" /] e utilizzare javascript (jquery) per analizzarlo e visualizzarlo in relazione all'ora dell'utente.

http://momentjs.com/ Momento.js

mostrerà bene l'ora.

Answer 11

Potresti utilizzare quanto segue, che riporta la differenza di fuso orario dal GMT in minuti:

new Date().getTimezoneOffset();

Nota :- questa funzione restituisce un numero negativo.

Answer 12

getTimeZoneOffset() e toLocaleString sono utili per il lavoro di base sulla data, ma se hai bisogno di supporto per il fuso orario reale, guarda TimeZone.js di mde.

Ci sono alcune altre opzioni discusse nella risposta a questa domanda

Answer 13

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

Answer 14

Per convertire la data in data locale utilizzare il metodo toLocaleDateString().

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

Per convertire l'ora in ora locale utilizzare il metodo toLocaleTimeString().

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

Answer 15

Non so come eseguire la localizzazione, ma JavaScript è una tecnologia lato client.

usersLocalTime = new Date();

conterrà l'ora e la data del cliente (come riportato dal suo browser e, per estensione, dal computer su cui è seduto).Dovrebbe essere banale includere l'ora del server nella risposta e fare alcuni semplici calcoli per indovinare l'offset dell'ora.