Mise à jour input type date en javascript
Misterlolo57 Messages postés 12 Statut Membre -
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) :
***** Pour une lecture plus facile du code l'outil de présentation du code.
<!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>
<!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>
***** Pour une lecture plus facile du code l'outil de présentation du code.
- Input type date javascript
- Clear type - Guide
- Publipostage date inversée ✓ - Forum Word
- Trouver une date de naissance gratuit - Forum Webmastering
- Incompatibilité de type vba ✓ - Forum Programmation
- Telecharger javascript - Télécharger - Langages
1 réponse
Pour mettre à jour le champ de type "date" à partir du champ de type "number" et du champ de type "date", tu peux utiliser la méthode "setMonth" de l'objet Date en JavaScript.
Comment faire :
-
Dans la fonction "calculProchaineDate", récupére la valeur du champ de type "number" et du champ de type "date" en utilisant les méthodes "getElementById" et "value".
-
Crée un objet "Date" à partir de la valeur du champ de type "date" en utilisant la méthode "new Date()".
-
Ajoute le nombre de mois à la date en utilisant la méthode "setMonth" de l'objet Date. Cette méthode ajoute le nombre de mois spécifié à la date actuelle et renvoie le timestamp (nombre de millisecondes depuis le 1er janvier 1970) de la nouvelle date.
-
Pour afficher la date au format "yyyy-mm-dd", tu peux utiliser la méthode "toISOString" de l'objet Date pour obtenir une chaîne de caractères au format ISO. tu peux ensuite extraire les parties de la chaîne qui correspondent à l'année, au mois et au jour et les utiliser pour mettre à jour le champ de type "date".
Exemple :
function calculProchaineDate(periodeId, dateDernierEntretienId, dateProchainEntretienId){
// Récupération de la valeur du champ de type "number" et du champ de type "date"
var nbrMois = document.getElementById(periodeId).value;
var dateDernierEntretien = new Date(document.getElementById(dateDernierEntretienId).value);
// Ajout du nombre de mois à la date
var timestampProchaineDate = dateDernierEntretien.setMonth(dateDernierEntretien.getMonth() + nbrMois);
// Création de l'objet "Date" à partir du timestamp
var prochaineDate = new Date(timestampProchaineDate);
// Conversion de la date au format "yyyy-mm-dd"
var dateISO = prochaineDate.toISOString();
var annee = dateISO.substring(0, 4);
var mois = dateISO.substring(5, 7);
var jour = dateISO.substring(8, 10);
// Mise à jour du champ de type "date"
document.getElementById(dateProchainEntretienId).value = annee + "-" + mois + "-" + jour;
}