Pergunta

Eu quero o servidor para sempre servir datas em UTC no HTML, e ter o JavaScript no converso site do cliente para fuso horário local do usuário.

Bonus se eu puder saída no formato de data localidade do usuário.

Foi útil?

Solução

Parece que a forma mais infalível para começar com uma data UTC é criar um novo objeto Date e usar os métodos setUTC… configurá-lo para a data / hora que quiser.

saída Em seguida, os vários métodos toLocale…String fornecerá localizada.

Exemplo:

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

Algumas referências:

Outras dicas

Para novos projetos, basta usar moment.js

Esta questão é muito velho, então moment.js não existia naquela época, mas para novos projetos, simplifica tarefas como este lote a.

É melhor parse sua seqüência de data a partir da UTC da seguinte forma (criar uma ISO-8601 corda compatível com o servidor para obter resultados consistentes em todos os navegadores):

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

Agora é só usar m em seu aplicativo, moment.js padrões para o fuso horário local para as operações de exibição. Há muitas maneiras de formatar os valores de data e hora ou extraem partes do mesmo.

Você pode até mesmo formatar um objeto momento em que os usuários localidade como esta:

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

Para transformar um moment.js objeto em um fuso horário diferente (ou seja, nem o local, nem UTC), você vai precisar do moment.js fuso horário extensão . Essa página tem também alguns exemplos, é muito simples de usar.

Você pode usar new Date().getTimezoneOffset()/60 para o fuso horário. Há também um método toLocaleString() para exibir uma data usando a localidade do usuário.

Aqui está a lista completa: Trabalho com datas

Depois de ter seu objeto de data construídos, aqui está um trecho para a conversão:

A função leva um UTC formatado Data objeto e string de formato.
Você vai precisar de um protótipo Date.strftime.

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

    return d.strftime(format);
}

Em JS não há maneiras simples e multi-plataforma para formatar data hora local, fora de converter cada propriedade como mencionado acima.

Aqui está um corte rápido eu uso para obter o local de AAAA-MM-DD. Note-se que este é um hack, como a data final não terá o fuso horário correto mais (então você tem que ignorar fuso horário). Se eu precisar de qualquer outra coisa mais, eu uso 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)

O d.getTimezoneOffset () retorna o deslocamento em minutos zona de tempo, e o d.getTime () é em ms, daí a 60.000 x.

Aqui está o que eu usei em projetos anteriores:

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

O método .getTimezoneOffset() relata o deslocamento em minutos fuso horário, a contagem "para o oeste" do fuso horário GMT / UTC, resultando em um valor de deslocamento que é negativo para o que é comumente acostumado. (Exemplo, o tempo de Nova Iorque seria relatado para ser +240 minutos ou +4 horas)

Para a obter uma compensação em horas de fuso horário normal, você precisa usar:

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

detalhe importante:
Note-se que o horário de verão é tido em conta o resultado - assim que este método lhe dá é realmente o tempo offset -. Não o geográfica fuso horário actual deslocamento

Com data de código PHP que eu usei algo assim ..

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

Nós podemos chamá-lo assim

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

Eu misturo as respostas até agora e adicionar a ele, porque eu tive que ler todos eles e investigar, adicionalmente, por um tempo para exibir uma seqüência de data e hora do db em formato de fuso horário local do usuário.

A seqüência de data e hora vem de uma python / Django db no formato: 2016-12-05T15: 12: 24.215Z

Detecção confiável do idioma do navegador em JavaScript não parece trabalho em todos os navegadores (veja JavaScript para detectar navegador linguagem de preferência ), então eu obter o idioma do navegador do servidor.

Python / Django: Envie linguagem solicitação do navegador como parâmetro de contexto:

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

HTML: write-lo em uma entrada escondida:

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

JavaScript: obter o valor de entrada escondido por exemplo en-GB, en-US; q = 0,8, en; q = 0,6 / e, em seguida, tomar o primeiro idioma na lista única via substituir e expressão regular

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

JavaScript: convertido para data e hora e formatá-lo:

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

Veja: https: //developer.mozilla .org / en / docs / web / JavaScript / Referência / Global_Objects / Data / toLocaleDateString

O resultado é (idioma do navegador é en-gb): 2016/05/12, 14:58

A melhor solução que eu vim transversalmente é criar [exibição de tempo = "llll" datetime = "UTC TIME" /] Etiquetas e uso javascript (jQuery) para analisar e exibi-lo em relação ao tempo do usuário.

http://momentjs.com/ Moment.js

irá exibir o tempo muito bem.

Você pode usar o seguinte, que relata o deslocamento do GMT em minutos fuso horário:

new Date().getTimezoneOffset();

Nota: -. Esta função retornar um número negativo

getTimezoneOffset () e toLocaleString são boas para trabalhos básicos data, mas se você precisar de apoio real fuso horário, olhe para TimeZone.js de mde .

Há mais algumas opções discutidas na resposta a esta questão

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

Para converter data para toLocaleDateString uso data local () método.

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

Para converter tempo para toLocaleTimeString utilização horário local () método.

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

não sei como fazer locale, mas JavaScript é uma tecnologia do lado do cliente.

usersLocalTime = new Date();

terá data e hora do cliente nele (como relatado por seu navegador, e por extensão o computador que está sentado em). Deve ser trivial para incluir o tempo do servidor na resposta e fazer alguma matemática simples de adivinhar-timate offset.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top