Afficher la date et l'heure dans le format local de l'utilisateur et le décalage horaire
je veux que le serveur serve toujours des dates en UTC dans le HTML, et que JavaScript sur le site client le convertisse dans le fuseau horaire local de l'utilisateur.
Bonus si je peux sortir dans le format de date locale de l'utilisateur.
14 réponses
semble que la façon la plus infaillible de commencer avec une date UTC est de créer un nouvel objet Date et d'utiliser les méthodes setUTC… pour le mettre à la date/heure que vous voulez.
puis les diverses méthodes toLocale…String fourniront la sortie localisée.
exemple:
// 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:26Quelques références:
pour les nouveaux projets, il suffit d'utiliser moment.js
cette question est assez ancienne, donc moment.js n'existait pas à l'époque, mais pour les nouveaux projets, il simplifie les tâches comme beaucoup.
Il vaut mieux analyser votre date de chaîne à partir de l'UTC comme suit (créer un ISO-8601 compatible chaîne sur le serveur pour obtenir des résultats cohérents sur tous les navigateurs):
var m = moment("2013-02-08T09:30:26Z");
maintenant il suffit d'utiliser m dans votre application, moment.js par défaut le fuseau horaire local pour les opérations d'affichage. Il existe de nombreuses façons de formater les valeurs de date et d'heure ou d'en extraire des portions.
vous pouvez même formater un objet moment dans le local des utilisateurs comme ceci:
m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us
pour transformer un moment.objet js dans un fuseau horaire différent (c'est-à-dire ni le fuseau local ni UTC)), vous aurez besoin du moment .js fuseau horaire extension . Cette page a aussi quelques exemples, c'est assez simple à utiliser.
Vous pouvez utiliser new Date().getTimezoneOffset()/60 pour le fuseau horaire. Il existe également une méthode toLocaleString() pour afficher une date en utilisant la locale de l'utilisateur.
Voici la liste complète: travailler avec des Dates
voici ce que j'ai utilisé dans des projets antérieurs:
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');
une fois que vous avez votre date objet construit, voici un extrait pour la conversion:
la fonction prend un objet Date formaté UTC et une chaîne de format.
Vous aurez besoin d'un prototype Date.strftime .
function UTCToLocalTimeString(d, format) {
if (timeOffsetInHours == null) {
timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
}
d.setHours(d.getHours() + timeOffsetInHours);
return d.strftime(format);
}
la méthode .getTimezoneOffset() indique le décalage du fuseau horaire en minutes, en comptant "vers l'ouest" à partir du fuseau horaire GMT/UTC, ce qui donne une valeur de décalage négative par rapport à ce à quoi on est habitué. (Exemple: heure de New York: +240 minutes ou +4 heures)
pour obtenir un décalage horaire normal en heures, vous devez utiliser:
var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60
détail Important:
Note que l'heure d'été est prise en compte dans le résultat - donc ce que cette méthode vous donne est vraiment le heure décalage - pas le fuseau horaire réel géographique".
avec la date du code PHP j'ai utilisé quelque chose comme ça..
function getLocalDate(php_date) {
var dt = new Date(php_date);
var minutes = dt.getTimezoneOffset();
dt = new Date(dt.getTime() + minutes*60000);
return dt;
}
On peut l'appeler comme ça
var localdateObj = getLocalDate('2015-09-25T02:57:46');
je mélange les réponses jusqu'à présent et j'ajoute à cela, parce que j'ai dû les lire toutes et enquêter en plus pendant un certain temps pour afficher une chaîne de date time de db dans le format de fuseau horaire local d'un utilisateur.
la chaîne datetime provient d'un python / django db au format: 2016-12-05T15: 12 :24.215 Z
détection fiable du langage du navigateur en JavaScript ne semble pas fonctionner dans tous les navigateurs (voir JavaScript pour la détection navigateur langue de préférence ), donc je reçois la langue du navigateur à partir du serveur.
Python/Django: envoyer une requête langage de navigateur comme paramètre de contexte:
language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })
HTML: écrivez-le dans une entrée cachée:
<input type="hidden" id="browserlanguage" value={{ language }}/>
JavaScript: obtenir la valeur de caché d'entrée par exemple, fr-fr,fr-fr;q=0.8,en;q=0.6/ et puis prendre la première langue dans la liste uniquement par l'intermédiaire de remplacer et d'expression régulière
const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "");
JavaScript: convertissez en datetime et formatez-le:
var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);
le résultat est (la langue du navigateur est en-gb): 05/12/2016, 14 :58
la meilleure solution que j'ai trouvée est de créer des balises [time display=" llll"datetime=" UTC TIME"/], et d'utiliser javascript (jquery) pour les analyser et les afficher par rapport au temps de l'utilisateur.
http://momentjs.com / Moment.js
affichera l'heure correctement.
vous pouvez utiliser ce qui suit, qui rapporte le décalage du fuseau horaire de GMT en minutes:
new Date().getTimezoneOffset();
Note : - cette fonction retourne un nombre négatif.
dans JS il n'y a pas de moyens simples et multiplateformes pour formater l'heure locale de la date, en dehors de la conversion de chaque propriété comme mentionné ci-dessus.
voici un hack rapide que j'utilise pour obtenir le AAAA-MM-JJ local. Notez qu'il s'agit d'un hack, car la date finale n'aura plus le fuseau horaire correct (donc vous devez ignorer le fuseau horaire). Si j'ai besoin d'autre chose, j'utilise 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)
le D. getTimezoneOffset () renvoie l'offset du fuseau horaire en quelques minutes, et le D. getTime () est en ms, d'où le x 60,000.
getTimeZoneOffset () et toLocaleString sont bons pour le travail de base de la date, mais si vous avez besoin du soutien de fuseau horaire réel, regardez le fuseau horaire de mde.js .
il y a quelques autres options discutées dans la réponse à cette question
pour convertir la date en date locale, utilisez la méthode toLocaleDateString ().
var date = (new Date(str)).toLocaleDateString(defaultlang, options);
pour convertir le temps en heure locale, utilisez la méthode toLocaleTimeString ().
var time = (new Date(str)).toLocaleTimeString(defaultlang, options);
ne sait pas comment faire la localisation, mais javascript est une technologie côté client.
usersLocalTime = new Date();
aura l'heure et la date du client (tel que rapporté par leur navigateur, et par extension l'ordinateur qu'ils sont assis à). Il devrait être trivial d'inclure le temps du serveur dans la réponse et de faire quelques calculs simples pour deviner-timate offset.