Afficher la date en javascript

**Beginner.** · 30/07/2017, 19h59

Envoyé par apdf1

Je te remercie mais j'ai toujours se problème de date si tu met il devrais affiché 03:49:00 au 31/07/2017 alors qui m'affiche 03:49:00 au 30/07/201

Oui eh bien c'est normal : l'heure est correcte comme tu le vois et pour la date il faut faire pareil : .

Donc pour la date et l’heure : - .

As-tu testé le code que j'ai mis en lien ? Il y a des exemples dedans...

**Beginner.** · 30/07/2017, 20h00

Encore une fois : Ceci dit si tu veux tenir compte du conseil de NoSmoking il suffit de reprendre la modification faite par Kennel sébastien

**NoSmoking** · 30/07/2017, 21h18

Vous vous entêtez avec vos ID alors qu'il n'en est nul besoin.

Sur base de cette structure HTML

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
<p data-gmt="-8">
  GMT -8 :
  <span class="date"></span>
  -
  <span class="heure"></span>
<p>
<p data-gmt="2">
  GMT +2 :
  <span class="date"></span>
  -
  <span class="heure"></span>
<p>
<p data-gmt="8">
  GMT +8 :
  <span class="date"></span>
  -
  <span class="heure"></span>
<p>

il suffit de récupérer les éléments participants au calcul/affichage. Il y a autant d'éléments possédant une data-gmt que d'éléments ayant la class="date" et d'éléments ayant la class="heure".

De tout ceci en découle le code suivant :

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
// 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;
 
function showDate() {
  var dTmp;
  var gmt;
  var i;
  var nb = oDest.length;
  date = new Date();
  for (i = 0; i < nb; i += 1) {
    // récup. de l'écart
    gmt = oDest[i].dataset.gmt * 1;
    // récup. de la date correspondante
    dTmp = new Date(date.getTime() + ((gmtLocal - gmt) * hms));
    // affichage résultats
    destDate[i].textContent = dTmp.toDateString();
    destHeure[i].textContent = dTmp.toTimeString().split(' ') [0];
  }
  // rappel de la fonction
  setTimeout(showDate, 1000);
}
// appel de la fonction
showDate();

Voilà une façon simple de faire.

Nota : dataset, reconnu qu'à partie de IE11, peut être remplacé par getAttribute('data-gmt').

**apdf1** · 30/07/2017, 22h12

Re bonsoir NoSmoking

Je te remercie beaucoup claire net et précis si je peut me permettre peut tu me dire comment afficher les jour et mois en français ?

Mercie d'avance et boonne soirée

max

**Beginner.** · 30/07/2017, 22h22

Envoyé par NoSmoking

Vous vous entêtez avec vos ID alors qu'il n'en est nul besoin.

Salut, je t'ai répondu au message 18 (je ne sais pas si tu l'as vue) :

"@NoSmoking : Oui tout-à-fait merci pour le rappel. En fait le code initial n'est pas de moi, j'ai juste rajouté l'affichage de la date et c'est d’après le code que j'ai compris qu'il fallait ajouter un id pour préciser le décalage horaire."

Donc moi je suis tout-à-fait d'accord avec toi d'ailleurs j'avais suivi ton conseil et je mettais fait une version avec les data ici : http://jsbin.com/dudoqaqayo/edit?html,output mais c'est à apdf1 de voir si il veut suivre le conseil ou non... Mais je ne peux pas lui imposer alors j'ai juste rajouter ce qu'il voulait mais c'est sûr parfois c'est mieux de refaire le code, là aussi on est d'accord...

Envoyé par NoSmoking

Nota : dataset, reconnu qu'à partie de IE11, peut être remplacé par getAttribute('data-gmt').

Oui c'est ce que j'avais fait dans le lien ci-dessus, j'ai repris ça du code de Kennel sébastien...

Merci pour l'exemple avec les dataset...

Envoyé par NoSmoking

Voilà une façon simple de faire.

Merci j'ai testé ton code ici : http://jsbin.com/gurumikufu/edit?html,js,output

J'ai juste fait une petite correction :

remplacement de : dTmp = new Date(date.getTime() + ((gmtLocal - gmt) * hms));

par dTmp = new Date(date.getTime() + ((gmt - gmtLocal) * hms));

**Beginner.** · 30/07/2017, 22h26

Envoyé par apdf1

Re bonsoir NoSmoking

Je te remercie beaucoup claire net et précis si je peut me permettre peut tu me dire comment afficher les jour et mois en français ?

Dans le code que j'ai posté j'ai mis les jours en français, l'as-tu testé ? Il ne fonctionne pas chez toi ?

PS : Tu as testé le code de NoSmoking ? Parce que il me semble qu'il y a avait une petite correction à faire... Mais attend la confirmation de NoSmoking ça vaut mieux on sait jamais, je me trompe peut-être...

**apdf1** · 30/07/2017, 22h55

Re,

Le code de NoSmoking fonctionne très bien sauf que j'aurais aimé avoir les jours et les mois en français .

Merci à tous et bonne soirée

Max

**NoSmoking** · 31/07/2017, 16h59

Envoyé par Beginner.

J'ai juste fait une petite correction :

je m'en sors bien car le but du code était surtout de montrer comment structurer pour pouvoir utiliser un boucle pour le traitement, pas franchement regardé les résultats

Voici donc un exemple plus complet avec une autre approche pour le formatage de la sortie d'affichage, le code est commenté je vous laisse lire

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>

Nota :

• ! Pas sûr qu'avec cette méthode les résultats soient corrects aux changement d'heure.
• Pour une bibliothèque complète il existe Moment.js et Moment Timezone.
• Plein de bonnes informations sur l'objet Date (MDN).

**apdf1** · 31/07/2017, 18h11

Bonjour NoSmoking

Si j'ai un mot à dire BRAVO exactement la recherche
Je te remercie et te souhaite une bonne fin d’après midi

A bientôt je l’espère

Max