web-dev-qa-db-fra.com

Affichage de la date et de l'heure dans le format de paramètres régionaux et le décalage horaire de l'utilisateur

Je veux que le serveur serve toujours les dates en UTC dans le code HTML et que JavaScript sur le site client le convertisse en fuseau horaire local de l'utilisateur.

Bonus si je peux sortir dans le format de date local de l'utilisateur.

javascriptdatetimetimezone
145
kch

Le moyen le plus sûr de commencer avec une date UTC consiste à créer un nouvel objet Date et à utiliser les méthodes setUTC… pour le définir à la date/heure souhaitée.

Ensuite, les différentes méthodes toLocale…String fourniront une 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:26

Quelques références:

148
kch

Pour les nouveaux projets, utilisez simplement moment.js

Cette question est assez ancienne, donc moment.js n'existait pas à cette époque, mais pour les nouveaux projets, cela simplifie beaucoup les tâches comme celle-ci. 

Il est préférable de analyser votre chaîne de date UTC comme suit (créez une chaîne compatible ISO-8601 sur le serveur pour obtenir des résultats cohérents sur tous les navigateurs):

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

Maintenant, utilisez simplement m dans votre application, moment.js est défini par défaut sur le fuseau horaire local pour les opérations d’affichage. Il y a plusieurs façons de formater les valeurs de date et d'heure ou d'extraire des parties de celles-ci.

Vous pouvez même formater un objet moment dans les paramètres régionaux des utilisateurs, comme ceci:

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

Pour transformer un objet moment.js en un fuseau horaire différent (c'est-à-dire ni le local ni l'UTC), vous aurez besoin de extension du fuseau horaire moment.js . Cette page a aussi quelques exemples, c'est assez simple à utiliser.

61
theDmi

Vous pouvez utiliser new Date().getTimezoneOffset()/60 pour le fuseau horaire. Il existe également une méthode toLocaleString() pour afficher une date en utilisant les paramètres régionaux de l'utilisateur.

Voici la liste complète: Travailler avec des dates

19
jop

Une fois que vous avez construit votre objet de date, voici un extrait de la conversion:

La fonction prend un objet Date au format UTC et une chaîne de formatage.
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);
}
6
simianarmy

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

Dans JS, il n’existe pas de moyen simple et multiplate-forme de formater l’heure locale, en dehors de la conversion de chaque propriété comme indiqué ci-dessus. 

Voici un rapide bidouillage que j'utilise pour obtenir le AAAA-MM-JJ local. Notez qu'il s'agit d'un bidouillage, car la date finale n'aura plus le fuseau horaire correct (vous devez donc ignorer le fuseau horaire). Si j'ai besoin de quelque chose d'autre, 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 le décalage de fuseau horaire en minutes et le d.getTime () est en ms, d’où le x 60 000.

4
Jeremy Chone

La méthode .getTimezoneOffset() rapporte le décalage de 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 à celle à laquelle on est habituellement habitué. (Exemple, l'heure de New York serait de +240 minutes ou de +4 heures)

Pour obtenir un décalage de fuseau horaire normal en heures, vous devez utiliser:

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

Détail important:
Notez que l’heure d’été est prise en compte dans le résultat. Cette méthode vous donne donc le décalage heure et non le décalage géographique fuseau horaire.

3
Már Örlygsson

Avec la date du code PHP, j'ai utilisé quelque chose comme ceci.

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 appeler ça comme ça

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

Je mélange les réponses jusqu'ici et j'y ajoute, car je devais toutes les lire et enquêter en outre pendant un certain temps pour afficher une chaîne de date/heure à partir de db dans le format de fuseau horaire local de l'utilisateur.

La chaîne datetime provient d'une base de données python/Django au format: 2016-12-05T15: 12: 24.215Z

La détection fiable de la langue du navigateur en JavaScript ne semble pas fonctionner dans tous les navigateurs (voir JavaScript pour détecter les préférences de langue du navigateur ), je reçois donc la langue du navigateur du serveur.

Python/Django: langue du navigateur des requêtes d'envoi en tant que 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 l'entrée masquée, par exemple. en-GB, en-US; q = 0,8, en; q = 0,6/et ensuite prendre la première langue de la liste uniquement via replace et une expression régulière

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

JavaScript: convertir en date et heure et le formater:

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

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

Le résultat est (langue du navigateur est en-gb): 05/12/2016, 14:58

3
Anja

La meilleure solution que j'ai rencontrée consiste à créer des balises [time display = "llll" datetime = "UTC TIME" /] et à utiliser javascript (jquery) pour l'analyser et l'afficher en fonction du temps de l'utilisateur.

http://momentjs.com/ Moment.js 

affichera bien le temps.

2
Daniel

Vous pouvez utiliser ce qui suit, qui rapporte le décalage du fuseau horaire par rapport à GMT en minutes: 

new Date().getTimezoneOffset();

Remarque : - cette fonction retourne un nombre négatif.

2
dave

getTimeZoneOffset () et toLocaleString sont utiles pour le travail de base des dates, mais si vous avez besoin d'une prise en charge d'un fuseau horaire réel, regardez/ TimeZone.js de mde. 

Il y a quelques autres options discutées dans la réponse à cette question

1
Aeon

Pour convertir date en date locale, utilisez la méthode toLocaleDateString ().

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

Pour convertir l'heure en heure locale, utilisez la méthode toLocaleTimeString ().

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

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

0
Sergey