Mise à jour input type date en javascript

Fermé

Michgoarin - Modifié le 19 déc. 2022 à 16:56
Misterlolo57 Messages postés 12 Date d'inscription jeudi 29 décembre 2022 Statut Membre Dernière intervention 30 décembre 2022 - 30 déc. 2022 à 16:46

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.

A voir également:

Input type date javascript
Telecharger javascript - Télécharger - Langages
Whatsapp date incorrecte ✓ - Forum Mobile
Input signal out of range - Forum Ecran
Publipostage date inversée ✓ - Forum Word

1 réponse

Réponse 1 / 1

Misterlolo57 Messages postés 12 Date d'inscription jeudi 29 décembre 2022 Statut Membre Dernière intervention 30 décembre 2022 10
30 déc. 2022 à 16:46

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;
}

Discussions similaires

input signal out of range

je cherche la date et le lieu de naissance d une personne

Erreur d'exécution 13 Incompatibilité de type

Javascript Arrondi à 2 chiffres après la virgule

Faiblesse des pokémon spectre