Visualizza la data / ora nel formato locale dell'utente e l'ora

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

Bonus se posso produrre nel formato data internazionale dell'utente.

Sembra che il modo più sicuro per iniziare con una data UTC sia quello di creare un nuovo Dateoggetto e utilizzare i setUTC…metodi per impostarlo sulla data / ora desiderata.

Quindi i vari toLocale…Stringmetodi forniranno un 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:

• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Per i nuovi progetti, basta usare moment.js

Questa domanda è piuttosto vecchia, quindi moment.js non esisteva in quel momento, ma per i nuovi progetti semplifica moltissimo compiti come questo.

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

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

Ora basta usare mnella tua applicazione, moment.js per impostazione predefinita sul fuso orario locale per le operazioni di visualizzazione. Esistono molti modi per formattare i valori di data e ora o estrarne parti.

Puoi persino formattare un oggetto momento nella locale 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 (cioè né quello locale né UTC), avrai bisogno dell'estensione del fuso orario moment.js . Quella pagina ha anche alcuni esempi, è piuttosto semplice da usare.

È possibile utilizzare new Date().getTimezoneOffset()/60per il fuso orario. Esiste anche un toLocaleString()metodo per visualizzare una data utilizzando le impostazioni internazionali dell'utente.

Ecco l'intero elenco: lavorare con le date

Dopo aver costruito l'oggetto data, ecco uno snippet per la conversione:

La funzione accetta un oggetto Date formattato UTC e una stringa di formato.
Avrai bisogno di un Date.strftimeprototipo.

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

    return d.strftime(format);
}

In JS non ci sono modi semplici e multipiattaforma per formattare l'ora della data locale, al di fuori della conversione di ogni proprietà come menzionato sopra.

Ecco un trucco rapido che utilizzo per ottenere il AAAA-MM-GG locale. Nota che si tratta di un hack, poiché la data finale non avrà più il fuso orario corretto (quindi devi ignorare il fuso orario). Se ho bisogno di 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, quindi x 60.000.

Ecco cosa ho usato nei progetti precedenti:

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

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

Per ottenere un normale fuso orario in ore, è necessario utilizzare:

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

Dettaglio importante: si
noti che l'ora legale viene presa in considerazione nel risultato, quindi ciò che questo metodo offre è in realtà la differenza di fuso orario , non la differenza di fuso orario geografico reale .

Con la data dal 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');

Mescolo le risposte finora e le aggiungo, perché ho dovuto leggerle tutte e investigare ulteriormente per un po 'per visualizzare una stringa di data e ora da db nel formato di fuso orario locale dell'utente.

La stringa datetime proviene da un db python / django nel formato: 2016-12-05T15: 12: 24.215Z

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

Python / Django: invia la lingua del browser delle richieste 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 di input nascosto, ad es. En-GB, en-US; q = 0.8, en; q = 0.6 / e quindi accetta la prima lingua nell'elenco solo tramite sostituisci 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);

Vedi: 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

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

http://momentjs.com/ Moment.js

visualizzerà bene l'ora.

È possibile utilizzare quanto segue, che riporta l'offset del fuso orario da GMT in minuti:

new Date().getTimezoneOffset();

Nota: - questa funzione restituisce un numero negativo.

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

Ci sono alcune altre opzioni discusse nella risposta a questa domanda

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

Non so come eseguire le impostazioni locali, ma JavaScript è una tecnologia lato client.

usersLocalTime = new Date();

avrà l'ora e la data del cliente al suo interno (come riportato dal proprio browser e per estensione dal computer in cui si trovano). Dovrebbe essere banale includere il tempo del server nella risposta ed eseguire alcuni semplici calcoli per indovinare l'offset temporale.