Fuseau horaire local

**apdf1** · 21/11/2017, 08h53

Bonjour,

J'ai un code pour trouver l'heure local des pays qui fonctionne très bien et qui à était fait par NoSmoking que je salut et remercie au passage.
Mon problème et qu'avec les changement d'heure ét/hiver sa ne correspond plus normal!
Y a t-il un moyen de changer cela?

Mon code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<meta name="Author" content="NoSmoking">
<title>Affichage heure suivant GMT</title>
<style>
html, body{
  margin: 0;
  padding: 1em;
  font: 1em/1.5 Verdana, sans-serif;
}
p:before {
  content: "(GMT " attr(data-gmt) ") ";
  font-size: .8em;
  color: #888;
}
p span {
  text-indent: 1em;
}
.date:before {
  content: " ";
  display: block;
}
.heure {
  font-style: italic;
  color: blue;
}
</style>
</head>
<body>
<p data-gmt="+10">
  <b>Sydney</b> :
  <span class="date"></span>
  <span class="heure"></span>
</p>
<p data-gmt="+7">
  <b>Bangkok</b> :
  <span class="date"></span>
  <span class="heure"></span>
</p>
<p data-gmt="+2">
  <b>Paris</b> :
  <span class="date"></span>
  <span class="heure"></span>
</p>
<p data-gmt="-4">
  <b>New-York</b> :
  <span class="date"></span>
  <span class="heure"></span>
</p>
<p data-gmt="-10">
  <b>Papeete</b> :
  <span class="date"></span>
  <span class="heure"></span>
</p>
<script>
// récup des éléments, pas besoin d'ID
var oDest = document.querySelectorAll('[data-gmt]');
var destDate = document.querySelectorAll('.date');
var destHeure = document.querySelectorAll('.heure');
// récup. du décalage
var date = new Date();
var gmtLocal = - date.getTimezoneOffset() / 60;
var hms = 3600 * 1000;
var options = {weekday: "long", year: "numeric", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"};
 
// because IE11 & Edge ne prennent pas en compte correctement text-transform: capitalize;
function capitalize(str) {
  return str.replace(/(\b[a-z](?!\s))/g, function (x) {
    return x.toUpperCase();
  });
}
 
function showDate() {
  var gmt;
  var dTmp;
  var sDate;
  var sJour;
  var sTime;
  var i;
  var nb = oDest.length;
  date = new Date();
  for (i = 0; i < nb; i += 1) {
    // lecture écart
    gmt = oDest[i].getAttribute('data-gmt') /*dataset.gmt*/ * 1;
    // récup. de la date correspondante
    dTmp = new Date(date.getTime() + ((gmt - gmtLocal) * hms));
    // récup format local
    sDate = dTmp.toLocaleString('fr-FR', options).split(' ');
    // jour dans les 4 premier éléments
    sJour = sDate.slice(0,4);
    // heure dans dernier élément
    sTime = sDate.pop();
    // affichage résultats
    destDate[i].textContent = capitalize( sJour.join(' '));
    destHeure[i].textContent = sTime;
  }
  // rappel de la fonction
  setTimeout(showDate, 1000);
}
// appel de la fonction
showDate();
</script>
</body>
</html>

Je vous remercie d'avance
Cordialement
Max

**NoSmoking** · 21/11/2017, 16h56

Bonjour,
si tu ne veux rien changé à ta fonction showDate() il est possible de gérer un objet prenant en compte les GMT d'hiver, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// GMT en horaire d'hiver
var gmtHiver = {
  "Sydney":  "+11",
  "Bangkok":  "+7",
  "Paris":    "+1",
  "New-York": "-5",
  "Papeete": "-10"
};

ensuite il te faut vérifier que l'on est en hiver en comparant la valeur de gmtLocal qui doit être égale à 2 en France.

Si on est en hiver dans ce cas on remplace les valeurs des data-gmt par les valeurs d'hiver.

Cela pourrait se faire de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// mise à jour des GMT, en france GMT +2 en été
if (gmtLocal !== 2) {
  var ville;
  var oData;
  var i;
  var nb = oDest.length;
  for (i = 0; i < nb; i += 1) {
    // get la ville
    ville = oDest[i].firstElementChild.textContent;  // attention à la structure HTML
    // get les datas
    oData = gmtHiver[ville];
    // change GMT si existe
    if (oData) {
      oDest[i].setAttribute('data-gmt', oData);
    }
  }
}

Le reste reste inchangé.

Au final le code modifié revient à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// GMT en horaire d"hiver
var gmtHiver = {
  "Sydney":  "+11",
  "Bangkok":  "+7",
  "Paris":    "+1",
  "New-York": "-5",
  "Papeete": "-10"
};
// récup des éléments, pas besoin d'ID
var oDest = document.querySelectorAll('[data-gmt]');
var destDate = document.querySelectorAll('.date');
var destHeure = document.querySelectorAll('.heure');
// récup. du décalage
var date = new Date();
var gmtLocal = - date.getTimezoneOffset() / 60;
var hms = 3600 * 1000;
var options = {weekday: "long", year: "numeric", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"};
 
// mise à jour des GMT, en france GMT +2 en été
if (gmtLocal !== 2) {
  var ville;
  var oData;
  var i;
  var nb = oDest.length;
  for (i = 0; i < nb; i += 1) {
    // get la ville
    ville = oDest[i].firstElementChild.textContent;
    // get les datas
    oData = gmtHiver[ville];
    // change GMT si existe
    if (oData) {
      oDest[i].setAttribute('data-gmt', oData);
    }
  }
}
 
// because IE11 & Edge ne prennent pas en compte correctement text-transform: capitalize;
function capitalize(str) {
  return str.replace(/(\b[a-z](?!\s))/g, function (x) {
    return x.toUpperCase();
  });
}
 
function showDate() {
  var gmt;
  var dTmp;
  var sDate;
  var sJour;
  var sTime;
  var i;
  var nb = oDest.length;
  date = new Date();
  for (i = 0; i < nb; i += 1) {
    // lecture écart
    gmt = oDest[i].getAttribute('data-gmt') /*dataset.gmt*/ * 1;
    // récup. de la date correspondante
    dTmp = new Date(date.getTime() + ((gmt - gmtLocal) * hms));
    // récup format local
    sDate = dTmp.toLocaleString('fr-FR', options).split(' ');
    // jour dans les 4 premier éléments
    sJour = sDate.slice(0,4);
    // heure dans dernier élément
    sTime = sDate.pop();
    // affichage résultats
    destDate[i].textContent = capitalize( sJour.join(' '));
    destHeure[i].textContent = sTime;
  }
  // rappel de la fonction
  setTimeout(showDate, 1000);
}
// appel de la fonction
showDate();

Attention
ce code n'est valable que si il est appelé depuis un poste situé en GMT identique à la France.

**apdf1** · 21/11/2017, 17h20

Bonjour NoSmoking,

Je vais voir cela de plus prés et étudier la façon de faire.

Je te remercie beaucoup et te souhaite une bonne soirée

Max

**mathieu** · 22/11/2017, 18h46

attention, comme l'a indiqué NoSmoking ce code est juste un exemple qui fonctionne quand le navigateur qui ouvre la page est sur le même fuseau que l'heure de la France.

de plus certains pays ne changent pas en même temps que l'heure français donc cela complique encore plus les tests à faire :
https://fr.wikipedia.org/wiki/Heure_...h.C3.A8re_nord

**danielhagnoul** · 22/11/2017, 22h13

Je le répète depuis longtemps, pour gérer des dates, il faut utiliser le format de date ISO long : 2017-11-22T22:08:37.583+0100.

De plus, http://momentjs.com/ est incontournable depuis quelques années déjà.

**apdf1** · 23/11/2017, 08h30

Bonjour danielhagnoul

Si je suis ton raisonnement le code de NoSmoking n'est pas à jour?

Bonne journée

Max

**danielhagnoul** · 23/11/2017, 22h40

La première version du code de @NoSmoking a certainement été conçue pour répondre à un besoin précis.

Dans le passé (plusieurs années), j'utilisais aussi un code maison, mais à l'usage il s'est très vite révélé insuffisant et bogué sur la gestion des Time Zone.

C'est un sujet très complexe, voir la carte UTC offsets worldwide dans cette page Wikipédia : https://en.wikipedia.org/wiki/Time_zone

http://momentjs.com/
http://momentjs.com/timezone/

Les exemples basiques vous sembleront faciles, puis l'éventail des possibilités vous semblera complexe et tout cela vous demandera un apprentissage sérieux, mais c'est le prix à payer pour gérer et manipuler correctement des dates non triviales.

**NoSmoking** · 25/11/2017, 12h10

« Bon Dieu ! Mais c’est… Bien sûr ! » merci Raymond
...
d'autant que dans la réponse à la discussion d'origine, Afficher la date en javascript, j'en faisait référence

Fuseau horaire local

JavaScript

Discussions similaires

Partager

Partager