Afficher la date en javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour

J'ai un code pour afficher l'heure de tous les pays du monde qui fonctionne tr�s bien et il doit afficher la date mais je suis nul en javascript donc je ne sais pas comment afficher la date. J'ai mis <spant id="date"> ou <spant id="hours"> mais sa ne fontionne pas

Voici mon code:

Code:

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
<script>
    var date = new Date()
    var gmtLocal;
 
    function temps(){
        date = new Date();
        var outputs = document.getElementsByClassName("hours");
        for(var i=0;i<outputs.length;i++){
            outputs[i].innerHTML = getFormatedDate(outputs[i].id);
        }
    }
 
    gmtLocal = -date.getTimezoneOffset() / 60;
    if(document.getElementById("gmtlocal")){ 
        document.getElementById("gmtlocal").innerHTML = "GMT " + ((gmtLocal < 0) ? "-" : "+") + gmtLocal;
    }
    if(document.getElementById("local")){
        document.getElementById("local").id = gmtLocal;
    }
 
    setInterval(temps, 1000);
 
    function getFormatedDate(gmt){
        var dateTmp = new Date(date.getTime() + ((gmt - gmtLocal) * 3600 * 1000));
        var str = "";
        str += padTo2(dateTmp.getHours()) + ":" + padTo2(dateTmp.getMinutes()) + ":" + padTo2(dateTmp.getSeconds());
 
        return str;
    }
 
    function padTo2(num){
        if(num < 10){
            return "0" + num;
        }
        else{
            return num + "";
        }
    }
</script>

Je vous remercie d'avance

Max

29/07/2017, 09h48
Kennel s�bastien

Bonjour max,

C'est parce qu'il faut �crire :

Code:



et non :

Code:

<spant id="hours">

Ton code JavaScript recherche des classes � hours � pas un identificateur � hours �.
29/07/2017, 10h11
apdf1

Bonjour

Merci d'avoir r�pondu, mais dans mon code HTML j'ai bien marqu�e ceci:

Code:

<td class="heure"> </td>

et la class="hours" me donne l'heure???

Bonne journ�e

Max
29/07/2017, 12h52
Kennel s�bastien

Mais quel est ton probl�me ?

Car en ayant test� ton programme, j'ai bien l'heure qui s'affiche : heure:minute:seconde.
29/07/2017, 20h24
Beginner.

Salut,

Citation:

Envoy� par apdf1

J'ai un code pour afficher l'heure de tous les pays du monde qui fonctionne tr�s bien et il doit afficher la date mais je suis nul en javascript donc je ne sais pas comment afficher la date. J'ai mis <spant id="date"> ou <spant id="hours"> mais sa ne fontionne pas

C'est normal qu'il n'affiche pas la date, il ne suffit pas d'ajouter une balise comme , il faut aussi ajouter du code JS...

Pour les heures c'est OK tu as la fonction getFormatedDate(gmt) j'ai chang� son nom en : getFormatedHour(gmt).

Et il faut bien ajouter un id (2 pour Paris) : sinon l'heure affich�e n'est pas correcte...

De plus le id est une string non un nombre donc il faudrait mieux le convertir avec un "+" par exemple : (+outputs[i].id) � la place de (outputs[i].id)...

J'ai ajout� la fonction manquante pour la date...

------> Tu peux tester ici : http://jsbin.com/vizoqaxogu/edit?html,output
30/07/2017, 07h05
apdf1

Bonjour Beginner

Excuse moi de ne pas avoir r�pondu avant. Je te remercie pour le code et les explications, je viens de tester sa fonctionne presque normalement sauf b�mol, la date ne suis pas
id= "-11" class="hours".
Je m'explique temps que mais des id= "4" ou +6 tous va bien la date affiche la date du jour
des que tu affiche id= "-8" ou -6 la date ne se mais pas � la date de la veille
ex: si � paris il est 7h00 et nous somme le 30/07/2017 �
Papeete > Polyn�sie Fran�aise il est 19h 00 mais le 29/07/2017

Je te souhaite une bonne journ�e et te remercie encore
Max
30/07/2017, 12h10
NoSmoking
Bonjour,

Citation:

Et il faut bien ajouter un id (2 pour Paris)

l'attribut ID d�finit un identifiant unique et ne devrait pas contenir de donn�es autre que celles qui servent � identifier l'�l�ment qui s'y raccroche.
Il existe d'autre moyen de mettre de l'information et notamment l'attribut data-xxx, dans ce cas ci cela pourrait �tre data-gmt par exemple.

Tous les calculs se feraient par rapport � la date GMT r�cup�r�e en ajoutant/retranchant suivant la valeur lue dans data-gmt.
Code:

1 2 3 4

Bonjour NoSmoking

Je te remercie mais moi et le javascript sa fait deux.

Je ne comprend pas comment ajouter l'attribut data-gmt dans mon code! peut tu m'aider parce que la je me noie?

Code:

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
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Date & heure GMT</title>
  </head>
  <body>
 
    Sans id (il manque 2 heures à Paris) : <br>
    ---> <span class="date"></span> - <span class="hours"></span>    
 
    <br>
    <br>
    Avec un id égale à 2 (Paris GMT+2) : <br>
    ---> <span class="date"></span> - <span id= "2" class="hours"></span>
    <br>
 
    <br>
    <span id="gmtlocal"></span>
    <span id="local">...</span>
 
    <script>
      var date = new Date()
      var gmtLocal;
 
      function temps(){
        date = new Date();
        var outputsHour = document.getElementsByClassName("hours");
        var outputsDate = document.getElementsByClassName("date");
 
        for(var i=0;i<outputsHour.length;i++){
          outputsHour[i].innerHTML = getFormatedHour(+outputsHour[i].id);          
        }
        for(var i=0;i<outputsDate.length;i++){          
          outputsDate[i].innerHTML = getFormatedDate(); 
        }
      }
 
      gmtLocal = -date.getTimezoneOffset() / 60;
      if(document.getElementById("gmtlocal")){ 
        document.getElementById("gmtlocal").innerHTML = "GMT " + ((gmtLocal < 0) ? "-" : "+") + gmtLocal;
      }
      if(document.getElementById("local")){
        document.getElementById("local").id = gmtLocal;
      }
 
      setInterval(temps, 1000);
 
      function getFormatedHour(gmt){
        var dateTmp = new Date(date.getTime() + ((gmt - gmtLocal) * 3600 * 1000));
        var str = "";
        str += padTo2(dateTmp.getHours()) + ":" + padTo2(dateTmp.getMinutes()) + ":" + padTo2(dateTmp.getSeconds());
 
        return str;
      }
      function getFormatedDate(){        
        var tab_jour = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
        var str = tab_jour[date.getDay()] + " " +padTo2(date.getDate()) + "/" + padTo2(date.getMonth() + 1) + "/" + padTo2(date.getFullYear());
        
        return str ;
      }
 
      function padTo2(num){
        if(num < 10){
          return "0" + num;
        }
        else{
          return num + "";
        }
      }
    </script>
 
  </body>
</html>

Je te remercie d'avance

Max

30/07/2017, 16h30
Kennel s�bastien

Cette ligne :

Code:

outputsHour[i].innerHTML = getFormatedHour(+outputsHour[i].id);

Tu l'as remplace par :

Code:

outputsHour[i].innerHTML = getFormatedHour(+outputsHour[i].getAttribute("data-gmt"));

Edit :
Pour ce qui est de ton probl�me de n�gation �a vient surement que tu utilises deux op�rateurs unaires en m�me temps�

En effet tu as donc par exemple � -6 � et dans ton code tu fais :
+-6.

Donc pour r�soudre ton probl�me essai avec la fonction � parseInt � plut�t que l'op�rateur unaire.

Remplace :

Code:

+outputsHour[i].id

Par :

Code:

parseInt(outputsHour[i].id, 10)

Bonjour Sebastien

Je te remercie de ton intervention.
J'ai bien remplacer la ligne que tu ma dit:

Code:

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
     <script>
      var date = new Date()
      var gmtLocal;
 
      function temps(){
        date = new Date();
        var outputsHour = document.getElementsByClassName("hours");
        var outputsDate = document.getElementsByClassName("date");
 
        for(var i=0;i<outputsHour.length;i++){
 
          outputsHour[i].innerHTML = getFormatedHour(+outputsHour[i].getAttribute("data-gmt"));
        }
        for(var i=0;i<outputsDate.length;i++){          
          outputsDate[i].innerHTML = getFormatedDate(); 
        }
 
      }
 
      gmtLocal = -date.getTimezoneOffset() / 60;
      if(document.getElementById("gmtlocal")){ 
        document.getElementById("gmtlocal").innerHTML = "GMT " + ((gmtLocal < 0) ? "-" : "+") + gmtLocal;
      }
      if(document.getElementById("local")){
        document.getElementById("local").id = gmtLocal;
      }
 
      setInterval(temps, 1000);
 
      function getFormatedHour(gmt){
        var dateTmp = new Date(date.getTime() + ((gmt - gmtLocal) * 3600 * 1000));
        var str = "";
        str += padTo2(dateTmp.getHours()) + ":" + padTo2(dateTmp.getMinutes()) + ":" + padTo2(dateTmp.getSeconds());
 
        return str;
      }
 
      function getFormatedDate(){        
     //   var tab_jour = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
        var tab_jour = new Array("", "", "", "", "", "", "");  
        var str = tab_jour[date.getDay()] + " " +padTo2(date.getDate()) + "/" + padTo2(date.getMonth() + 1) + "/" + padTo2(date.getFullYear());
 
        return str ;
      }
 
 
      function padTo2(num){
        if(num < 10){
          return "0" + num;
        }
        else{
          return num + "";
        }
      }
    </script>

Mais je ne comprend pas ou je doit int�grer dans ma ligne de code

Code:

<td class="heure"> </td>

Merci et bonne fin d�apr�s midi

Max

30/07/2017, 17h08
apdf1

Re,

J'ai essayer de remplacer

Code:

+outputsHour[i].id

par

Code:

parseInt(outputsHour[i].id, 10)

sa ne fonctionne pas?
30/07/2017, 17h09
Kennel s�bastien

Remplace :

Code:



Par :

Code:



PS: personnellement je ne recherche pas � rendre ton code propre, juste � faire en sorte qu'il marche comme tu le souhaites�
30/07/2017, 17h18
apdf1

Re,

Non sa ne change rien ou alors????

Remplace :

Code:

1
2
3
for(var i=0;i<outputsHour.length;i++){
    outputsHour[i].innerHTML = getFormatedHour(+outputsHour[i].getAttribute("data-gmt"));
}

Par :

Code:

1
2
3
4
5
6
7
8
        let gmt;
 
        for(var i=0;i<outputsHour.length;i++){
          gmt = outputsHour[i].getAttribute("data-gmt");
          gmt = (gmt === null) ? 0 : parseInt(gmt, 10);
 
          outputsHour[i].innerHTML = getFormatedHour(gmt);          
        }

30/07/2017, 17h29
apdf1

Re,

Non sa me donne la m�me heure de partous?

Mais tu as quoi dans le code html, parce que j'ai test� et �a fonctionne�

Code:

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Date & heure GMT</title>
  </head>
  <body>
 
    Sans id (il manque 2 heures à Paris) : <br>
    ---> <span class="date"></span> - <span class="hours"></span>    
 
    <br>
    <br>
    Avec un id égale à 2 (Paris GMT+2) : <br>
    ---> <span class="date"></span> - <span data-gmt="2" class="hours"></span>
    <br>
 
    <br>
    <span id="gmtlocal"></span>
    <span id="local">...</span>
 
    <script>
      var date = new Date()
      var gmtLocal;
 
      function temps(){
        date = new Date();
        var outputsHour = document.getElementsByClassName("hours");
        var outputsDate = document.getElementsByClassName("date");
        
        let gmt;
 
        for(var i=0;i<outputsHour.length;i++){
          gmt = outputsHour[i].getAttribute("data-gmt");
          gmt = (gmt === null) ? 0 : parseInt(gmt, 10);
 
          outputsHour[i].innerHTML = getFormatedHour(gmt);          
        }
        
        for(var i=0;i<outputsDate.length;i++){          
          outputsDate[i].innerHTML = getFormatedDate(); 
        }
      }
 
      gmtLocal = -date.getTimezoneOffset() / 60;
      if(document.getElementById("gmtlocal")){ 
        document.getElementById("gmtlocal").innerHTML = "GMT " + ((gmtLocal < 0) ? "-" : "+") + gmtLocal;
      }
      if(document.getElementById("local")){
        document.getElementById("local").id = gmtLocal;
      }
 
      setInterval(temps, 1000);
 
      function getFormatedHour(gmt){
        var dateTmp = new Date(date.getTime() + ((gmt - gmtLocal) * 3600 * 1000));
        var str = "";
        str += padTo2(dateTmp.getHours()) + ":" + padTo2(dateTmp.getMinutes()) + ":" + padTo2(dateTmp.getSeconds());
 
        return str;
      }
      function getFormatedDate(){        
        var tab_jour = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
        var str = tab_jour[date.getDay()] + " " +padTo2(date.getDate()) + "/" + padTo2(date.getMonth() + 1) + "/" + padTo2(date.getFullYear());
 
        return str ;
      }
 
      function padTo2(num){
        if(num < 10){
          return "0" + num;
        }
        else{
          return num + "";
        }
      }
    </script>
 
  </body>
</html>

30/07/2017, 17h42
apdf1

Re,

A paris il est : 17h42 au 30/07/2017
Si tu met ceci - 
tu devrais avoir 21 de moin soit: 17hh42 - 23h00 =18h42 mais du 29/07/2017
30/07/2017, 19h29
Beginner.

Salut,

@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.

Il y a d'ailleurs d'autres choses que je ferais autrement...

Citation:

Envoy� par apdf1

Excuse moi de ne pas avoir r�pondu avant. Je te remercie pour le code et les explications, je viens de tester sa fonctionne presque normalement sauf b�mol, la date ne suis pas
id= "-11" class="hours".
Je m'explique temps que mais des id= "4" ou +6 tous va bien la date affiche la date du jour
des que tu affiche id= "-8" ou -6 la date ne se mais pas � la date de la veille
ex: si � paris il est 7h00 et nous somme le 30/07/2017 �
Papeete > Polyn�sie Fran�aise il est 19h 00 mais le 29/07/2017

Oui d�sol�, j'y avais pens� par la suite et je me suis dit que j'allais revenir voir �a...

Teste �a : http://jsbin.com/kimemuyapi/edit?html,output
30/07/2017, 19h42
Beginner.

Ceci dit si tu veux tenir compte du conseil de NoSmoking il suffit de reprendre la modification faite par Kennel s�bastien
30/07/2017, 19h48
apdf1

Salut Beginner.

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

@+ et merci

Max

Voir 40 message(s) de cette discussion en une page