Affichage de la date dans un input

**REDBAR** · 13/10/2015, 15h54

Bonjour à tous.
Je suis un débutant en développement web .
Je bute depuis une semaine sur un truc;
Je voudrais afficher la date du jour dans un input de type date sur ma page avec javascript mais je n'y arrive pas.
Voici mon code
pour affiche la date

Code :

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

1
2
3
4
5
6
7
8
9
10
  function afficheDate() {  //cette fonction pour afficher la date                       
    var dateSysteme = new Date();
    var jour = ('0' + dateSysteme.getDate()).slice(-2);
    var mois = ('0' + (dateSysteme.getMonth() + 1)).slice(-2); //le numero du mois de janvier est 0
    var annee = dateSysteme.getFullYear();
 
    var aujourdhui = jour + "/" + mois + "/" + annee; //innerHTML
     document.getElementById('dateDuJour').value = aujourdhui;
      //document.getElementById("dateDuJour").innerHTML = aujourdhui;
  }

et voici le code html

Code html :

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

1
2
3
4
5
6
7
8
9
 <body onload="afficheDate();">
        <form class="form-horizontal well" method="post" action="#" th:object="${article}">
            <div class="form-group">
                <label class="control-label col-sm-2" id="aze" >Date :</label>
                <div class="col-md-4">
 
               <input type="date"  class="form-control input-sm"  id="dateDuJour" value=""/>
                ...
</body>

je rappelle que ce que ne fonctionne pas sur chrome car rien ne s'affiche dans le <INPUT type="date> mais le datepicker s'affiche bien
par contre sur IE et Firefox il marche mais n'affiche pas le datepicker.

comment faire pour que sur chrome comme sur IE et firefox etc la date s'affiche automatiquement mais également le datepicker aussi
Merci

**NoSmoking** · 13/10/2015, 18h59

Bonjour,
essaies avec un format conforme : "2015-10-13", lourd à parier que les tous ne fonctionneront pas. non plus

**SylvainPV** · 14/10/2015, 09h51

Il suffit de faire:

Code :

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

1
2
var aujourdhui = new Date();   
document.getElementById('dateDuJour').valueAsDate = aujourdhui;

Spec: https://html.spec.whatwg.org/multipa...ut-valueasdate

**REDBAR** · 14/10/2015, 12h45

Merci sylvainPV pour ton code. ça marche bien sur Chrome mais ne fonctionne pas sur IE et Firefox.
Cela il n'y aurait-il pas quelque chose à faire pour que ça passe sur tout les autres navigateur.
Mais peux m'en contenter puisse que c'est chrome qui est mon navigateur preferer. Cependant je cherche à le faire passer sur les autres.

**SylvainPV** · 14/10/2015, 13h46

Les tests par navigateur : https://html5test.com/compare/featur...lueAsDate.html

Rapport de bug sur Mozilla : https://bugzilla.mozilla.org/show_bug.cgi?id=769370

On peut compléter le support avec un polyfill. Je n'en ai pas trouvé d'existant sur le net mais je t'en ai fait un qui semble fonctionner sur Firefox et IE:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(!("valueAsDate" in HTMLInputElement.prototype)){
  Object.defineProperty(HTMLInputElement.prototype, "valueAsDate", {
    get: function(){
      var d = this.value.split(/\D/);
      return new Date(d[0], --d[1], d[2]);
    },
    set: function(d){
      var day = ("0" + d.getDate()).slice(-2),
           month = ("0" + (d.getMonth() + 1)).slice(-2),
           datestr = d.getFullYear()+"-"+month+"-"+day;
      this.value = datestr;
    }
  });
}

Une fois ce polyfill exécuté, valueAsDatedevrait marcher comme prévu.

Test ici : http://jsbin.com/wumikawero/1/edit?html,js,output

**REDBAR** · 14/10/2015, 15h02

@SylvainPV
Merci pour ton aide. excuse moi d'abuser comment dois-je ajouter ce code stp.
merci

**SylvainPV** · 14/10/2015, 15h57

Il faut qu'il soit exécuté n'importe où avant que toi tu utilises valueAsDate. Tu peux par exemple le mettre dans un fichier polyfills.js et l'inclure dans un <script> dans <head>.

Ensuite tu pourras utiliser valueAsDate comme tu l'as fait auparavant sur Chrome et ça devrait aussi marcher sur Firefox et IE.

**NoSmoking** · 14/10/2015, 19h40

Je voyais un truc plus direct en testant le type de l'INPUT qui sera text si non connu/reconnu par le navigateur.

Code :

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

1
2
3
4
5
6
7
8
var o = document.getElementById('dateDuJour');
var d = new Date();
var t = [];
t.push(d.getFullYear());
t.push(('0' + (d.getMonth() + 1)).slice(-2));
t.push(('0' + (d.getDate())).slice(-2));
// format suivant le type reconnu
o.value = o.type === 'date' ? t.join('-') : t.reverse().join('/');

**SylvainPV** · 14/10/2015, 19h58

Changer le format de date selon le support navigateur, bonne chance pour gérer ça à la récupération du formulaire côté serveur.

Mieux vaut passer par un polyfill sur input date, c'est pas ça qui manque et ils gèrent bien l'internationalisation des formats de dates.

**NoSmoking** · 14/10/2015, 20h26

...bonne chance pour gérer ça à la récupération du formulaire côté serveur.

cela ne va pas être insurmontable.

Le soucis me semble plutôt être le format affiché, qui peut être déroutant, suivant que le navigateur prend en compte le type="date" ou non.

Mieux vaut passer par un polyfill sur input date c'est pas ça qui manque...

sur le fond je suis bien d'accord et j'irais jeter un oeil sur ce qui existe

**SylvainPV** · 14/10/2015, 22h21

Non vraiment, crois-en mon expérience personnelle, c'est une bien mauvaise idée. Sur un projet pro, on avait commencé par une simple regex pour matcher jour/mois/année avec les formats DD/MM/YYYY et YYYY-MM-DD. Ensuite on a dû commencer à gérer d'autres formats issus de RFC pour l'import d'iCal. Et quand le bazar a commencé à devenir bien complexe, on nous a demandé de gérer le MM/DD/YYYY qui est aussi utilisé aux States. Problème, il se confond sur certaines dates avec DD/MM/YYYY. Au final, on a tout laissé tomber et on a utilisé momentJS pour balancer un temps UTC au serveur

**REDBAR** · 18/10/2015, 18h56

Bonsoir SylvainPV

Envoyé par ;8409334

Il faut qu'il soit exécuté n'importe où avant que toi tu utilises valueAsDate. Tu peux par exemple le mettre dans un fichier polyfills.js et l'inclure dans un <script> dans <head>.

Ensuite tu pourras utiliser valueAsDate comme tu l'as fait auparavant sur Chrome et ça devrait aussi marcher sur Firefox et IE.

j'ai chercher comment utiliser les polyfill mais tout ce que j'ai pu essayer n'a pas donner le resultat que je voulais. toujours c'est sur chrome que ça marche sur IE et FireFox ça fonctionne pas.
puis-je voir un exemple simple d'application?

**SylvainPV** · 19/10/2015, 00h38

Je ne sais pas comment le dire autrement: Il faut qu'il soit exécuté n'importe où avant que toi tu utilises valueAsDate.

donc juste mettre le code du polyfill avant le code utilisant valueAsDate devrait marcher, comme je l'ai montré sur l'exemple sur jsbin: http://jsbin.com/wumikawero/1/edit?html,js,output

**REDBAR** · 20/10/2015, 16h45

Merci SylvainPV
J'ai fait exactement ce que tu m'a conseillé et ça marche bien. Je met le code en entier certainement quelqu'un pourrait avoir besoin. ne sait on jamais

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
 
<script >
     function afficheDate() {  //cette fonction pour afficher la date                       
 
    if(!("valueAsDate" in HTMLInputElement.prototype)){
    Object.defineProperty(HTMLInputElement.prototype, "valueAsDate", {
      get: function(){
           var d = this.value.split(/\D/);
            return new Date(d[0], --d[1], d[2]);
            },
          set: function(d){
          var day = ("0" + d.getDate()).slice(-2),
             month = ("0" + (d.getMonth() + 1)).slice(-2),
           datestr = day+"/"+month+"/"+d.getFullYear();
            this.value = datestr;
          }
          });
          }
 
         var input = document.querySelector("#dateDuJour");
         input.valueAsDate = new Date();
 
        var p = document.createElement("p");
        document.body.appendChild(p);
 
        setInterval(function(){
            p.textContent = input.valueAsDate.toLocaleDateString();
        }, 100)
 
       var dateSysteme = new Date();
        document.getElementById('dateDuJour').valueAsDate = dateSysteme;                
        }
      </script>

**Zeus_Appolos** · 19/11/2018, 13h34

bonjour à tous, je suis débutant en programmation web. merci pour votre code. il répond vraiment en partie à mon besoin. Je souhaiterais avoir cet code au format datetime.

Affichage de la date dans un input

JavaScript

Discussions similaires

Partager

Partager