Afficher la date en javascript

**apdf1** · 28/07/2017, 17h31

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 :

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

**Beginner.** · 29/07/2017, 20h24

Salut,

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

**apdf1** · 30/07/2017, 07h05

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

**NoSmoking** · 30/07/2017, 12h10

Bonjour,

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
<p data-gmt="2">
  <span class="date"></span>
  <span class="heure"></span>
<p>

**apdf1** · 30/07/2017, 14h11

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 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
 <!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

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

Cette ligne :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Tu l'as remplace par :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

+outputsHour[i].id

Par :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

parseInt(outputsHour[i].id, 10)

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

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

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

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

Ceci dit si tu veux tenir compte du conseil de NoSmoking il suffit de reprendre la modification faite par Kennel s�bastien

**apdf1** · 30/07/2017, 19h48

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

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

Bonjour max,

C'est parce qu'il faut �crire :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<span class="hours"></span>

et non :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<spant id="hours"></span>

Ton code JavaScript recherche des classes � hours � pas un identificateur � hours �.

**apdf1** · 29/07/2017, 10h11

Bonjour

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<td class="heure"><span class="hours" id="4.5"></span> </td>

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

Bonne journ�e

Max

**Kennel s�bastien** · 29/07/2017, 12h52

Mais quel est ton probl�me ?

Car en ayant test� ton programme, j'ai bien l'heure qui s'affiche : heure:minute:seconde.

Afficher la date en javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager