Mise à jour input type date

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
michgoarin
Messages : 5
Enregistré le : 10 févr. 2021, 14:29

Mise à jour input type date

Message par michgoarin » 18 déc. 2022, 10:48

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) :

Code : Tout sélectionner

<!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 ?

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Mise à jour input type date

Message par webmaster » 19 déc. 2022, 11:43

Bonjour

La bonne fonction de calcul est :

Code : Tout sélectionner

	function calculProchaineDate(periodeId, dateDernierEntretienId, dateProchainEntretienId){
		var nbrMois = document.getElementById(periodeId).value;
		var dateDernierEntretien = new Date(document.getElementById(dateDernierEntretienId).value);
		dateDernierEntretien.setMonth( dateDernierEntretien.getMonth() + nbrMois );
        document.getElementById(dateProchainEntretienId).value=dateDernierEntretien.toISOString().substr(0,10)
	} // end function
La partie toISOString().substr(0,10) renvoit la date au format YYYY-MM-dd dans le champ input de type date
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

michgoarin
Messages : 5
Enregistré le : 10 févr. 2021, 14:29

Re: Mise à jour input type date

Message par michgoarin » 19 déc. 2022, 15:15

Bonjour webmaster,
Merci pour ta réponse.
J'obtiens un résultat surprenant : 19/07/1902
Lorsque j'affiche la date du dernier entretien (dateDernierEntretien) j'obtiens "Thu Jul 20 2102 01:00:00 GMT+0200 (heure d’été d’Europe centrale)"

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Mise à jour input type date

Message par webmaster » 20 déc. 2022, 13:23

Bonjour,

D'apres mes tests le calcul était bon
C'est quel navigateur ?
Aves quelles valeurs ?
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre