Mise à jour input type date

Michel Goarin
Javascript

Bonjour,
Je souhaiterai mettre à jour un champ Input Type Date à partir d'un input type Number (nombre de mois) et d'un champ type Date (date dernier entretien) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr">
<head>
<title> Page Fax Fournisseur</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="javascript">
    function calculProchaineDate(periodeId, dateDernierEntretienId, dateProchainEntretienId){
        var nbrMois = document.getElementById(periodeId).value;
        var dateDernierEntretien = new Date(document.getElementById(dateDernierEntretienId).value);
        document.getElementById(dateProchainEntretienId).value = dateDernierEntretien.setMonth( dateDernierEntretien.getMonth() + nbrMois );
    } // end function
</script>

</head>
<body>
    <input type="number" name="periode1" id="periode1" min="0" value="12" oninput="calculProchaineDate('periode1', 'dateDernierEntretien1', 'dateProchainEntretien1')"  />
    <input type="date" name="dateDernierEntretien1" id="dateDernierEntretien1" value="2010-12-20" oninput="calculProchaineDate('periode1', 'dateDernierEntretien1', 'dateProchainEntretien1')" />
    <input type="date" name="dateProchainEntretien1" id="dateProchainEntretien1" value="" />
    </br>    
    <input type="number" name="periode2" id="periode2" min="0" value="12" oninput="calculProchaineDate('periode2', 'dateDernierEntretien2', 'dateProchainEntretien2')"  />
    <input type="date" name="dateDernierEntretien2" id="dateDernierEntretien2" value="2012-02-24" oninput="calculProchaineDate('periode2', 'dateDernierEntretien2', 'dateProchainEntretien2')" />
    <input type="date" name="dateProchainEntretien2" id="dateProchainEntretien2" value="" />
    </br>
</body>
</html>

Je suis dans l'impasse.
Auriez vous une solution ?

4 réponses

David-CCO

Salut,

En regardant ton code, je vois 2 problèmes :

  • nbrMois n'est pas égal a un entier mais à une chaine de caractère du coup lorsque tu fais ton addition ça ne va pas additionner mais concaténer
  • le champ dateProchainEntretienId attend un format de date sous la forme YYYY-MM-DD or la variable dateDernierEntretien = new Date() soit Thu Dec 20 2011 01:00:00 GMT+0100 (heure normale d’Europe centrale). Du coup, il faut que tu formattes dateDernierEntretien pour avoir un format du style YYYY-MM-DD
Michel Goarin
Auteur

Une solution mais ne fonctionne pas si la période est supérieure à 24 mois :
<script>
function calculProchaineDate(periodeId, dateDernierEntretienId, dateProchainEntretienId){
var nbrMois = parseInt(document.getElementById(periodeId).value);
var derValue = document.getElementById(dateDernierEntretienId).value;
let der = derValue.split("-");
let yyyy = parseInt(der[0]);
let mm = parseInt(der[1]);
let dd = parseInt(der[2]);
let nouvMM = mm + nbrMois;
if (nouvMM > 12) {
nouvMM = nouvMM - 12;
yyyy += 1;
}
if (nouvMM < 10) nouvMM = "0"+nouvMM;
let prochDate = yyyy+"-"+nouvMM+"-"+dd;
let dateProchainEntretien = document.getElementById(dateProchainEntretienId);
dateProchainEntretien.value = prochDate;
console.log("prochDate : "+prochDate);
}
</script>

David-CCO

Oui c'est normal car si c'est supérieur à 24, il faut que tu rajoutes 2 années. Il te suffit de remplacer ce code :

    if (nouvMM > 12) {
        nouvMM = nouvMM - 12;
        yyyy += 1;
    }

Par

    while (nouvMM > 12) {
        nouvMM = nouvMM - 12;
        yyyy += 1;
    }

Et tout fonctionne. Par contre il faut aussi que tu gères le 0 devant les jours car si tu sélectionnes un jour inférieur à 10 ça ne marche pas.

Je me suis permis de réécrire la même fonction mais d'une façon différente car je pense que travailler directement avec l'objet Date c'est mieux. Ca évite notamment d'incrémenter manuellement l'année :

    function calculProchaineDate(periodeId, dateDernierEntretienId, dateProchainEntretienId){
        var nbrMois = parseInt(document.getElementById(periodeId).value);
        var dateDernierEntretien = new Date(Date.parse(document.getElementById(dateDernierEntretienId).value));
        dateDernierEntretien.setMonth( dateDernierEntretien.getMonth() + nbrMois);
        var year = dateDernierEntretien.getUTCFullYear();
        var month = ('0' + (dateDernierEntretien.getUTCMonth() + 1)).slice(-2);
        var day = ('0' + dateDernierEntretien.getUTCDate()).slice(-2);

        document.getElementById(dateProchainEntretienId).value = year + '-' + month + '-' + day;
    } // end function
Michel Goarin
Auteur

Bonjour David,
Tout fonctionne parfaitement.
Je vous remercie pour votre réactivité et le partage de vos connaissances.
Bonne journée.