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

Affichage de la date dans un input

JavaScript

Vue hybride

Discussions similaires

Partager

Partager