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