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

Question

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

Bonus si le résultat est au format de date de l'utilisateur.

Answer 1

Le moyen le plus sûr de commencer par une date UTC consiste à créer un nouvel objet Date et à utiliser les méthodes setUTC & # 8230; pour le définir à la date / le temps que vous voulez.

Ensuite, les différentes méthodes toLocale & # 8230; 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:

• toLocaleString
• àLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Answer 2

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 vaut mieux analyser votre chaîne de date à partir de l'UTC comme suit (créer un chaîne ISO-8601 compatible 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 existe diverses manières de formater les valeurs de date et d'heure ou d'en extraire des parties.

Vous pouvez même formater un objet moment dans l'environnement local de l'utilisateur, comme suit:

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 avez besoin du extension du fuseau horaire moment.js . Cette page contient également quelques exemples, elle est assez simple à utiliser.

Answer 3

Vous pouvez utiliser new Date (). getTimezoneOffset () / 60 pour le fuseau horaire. Il existe également une méthode toLocaleString () permettant d’afficher une date à l’aide des paramètres régionaux de l’utilisateur.

Voici la liste complète: Utilisation de dates

Answer 4

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

La fonction utilise 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);
}

Answer 5

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

Voici un piratage rapide que j’utilise pour obtenir l’année AAAA-MM-JJ locale. 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.

Answer 6

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

Answer 7

La méthode .getTimezoneOffset () enregistre 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 à ce à quoi 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 actuel.

Answer 8

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

Nous pouvons l'appeler comme ceci

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

Answer 9

Je mélange les réponses jusqu'à présent et j'y ajoute des réponses, car je devais toutes les lire et enquêter pendant un certain temps pour afficher une chaîne de date et heure à partir de db dans le format de fuseau horaire local d'un 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 ), le navigateur me donne la langue du navigateur.

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 masqué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 ne prend ensuite la première langue de la liste que via replace et 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 / fr / docs / Web / JavaScript / Référence / Global_Objects / Date / toLocaleDateString

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

Answer 10

La meilleure solution que j'ai rencontrée consiste à créer [time display = " llll " datetime = " UTC TIME " /] Tags et utilisez javascript (jquery) pour l’analyser et l’afficher par rapport au temps de l’utilisateur.

http://momentjs.com/ Moment.js

affichera bien l'heure.

Answer 11

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

new Date().getTimezoneOffset();

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

Answer 12

getTimeZoneOffset () et toLocaleString conviennent au travail de base des dates, mais si vous avez besoin d'une prise en charge de fuseau horaire réel, consultez la page TimeZone.js de mde .

La réponse à cette question

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

Pour convertir une 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);

Answer 15

Je ne sais pas comment définir les paramètres régionaux, mais javascript est une technologie côté client.

usersLocalTime = new Date();

contiendra l'heure et la date du client (comme indiqué par son navigateur et, par extension, par l'ordinateur sur lequel il est assis). Il devrait être facile d’inclure le temps du serveur dans la réponse et de faire quelques calculs simples pour deviner le décalage du décalage.