Affichage de la date dans un input

Version imprimable

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:

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:

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

13/10/2015, 18h59
NoSmoking

Bonjour,
essaies avec un format conforme : "2015-10-13", lourd à parier que les tous ne fonctionneront pas. non plus
14/10/2015, 09h51
SylvainPV
Il suffit de faire:
Code:

1 2 var aujourdhui = new Date(); document.getElementById('dateDuJour').valueAsDate = aujourdhui;
Spec: https://html.spec.whatwg.org/multipa...ut-valueasdate
14/10/2015, 12h45
REDBAR

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.

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:

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

14/10/2015, 15h02
REDBAR

@SylvainPV
Merci pour ton aide. excuse moi d'abuser comment dois-je ajouter ce code stp.
merci
14/10/2015, 15h57
SylvainPV

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.

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

Code:

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('/');

14/10/2015, 19h58
SylvainPV

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.
14/10/2015, 20h26
NoSmoking

Citation:

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

Citation:

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 ;)
14/10/2015, 22h21
SylvainPV

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 :aie:
18/10/2015, 18h56
REDBAR

Bonsoir SylvainPV

Citation:

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?
19/10/2015, 00h38
SylvainPV

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

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:

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>

19/11/2018, 13h34
Zeus_Appolos

format datetime

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.