Ajouter 15 mois à une date

Version imprimable

bonjour à tous ,

voila , je suis plus que débutant en js , et je n'arrive pas à mettre en oeuvre quelques choses qui ne doit pas être bien compliqué :

je m'explique :

j'ai un champ input dans un formulaire ( date_debut ) qui l'on remplit via datepicker .

j'ai un autre input (date_fin) ou je souhaiterais insérer la date sélectionné dans input date_debut , y rajouté 15 mois et l'affiché dans date_fin .

j'arrive à affiché la même date dans le input date_fin , maintenant je souhaiterais lui rajouter 15 mois .....;

voila j'espère avoir été clair dans mes propos ....

merci pour votre aide

voila le code
Code:

1 2 3 <input id="M1" class="datepicker" type="text" name="date_debut" value="" onchange="javascript:document.getElementById('M2').value=this.value;"><br> <input id="M2" class="mandat" type="text" name="date_fin" value="" ><br>

en javascript, c'est assez simple
L'astuce consiste à ajouter directement 15 mois au numero du mois actuel
Code:

1 2 3 4 5 var d=new Date(); // date du jour var m=d.getMonth()+15; d.setMonth(m); //on vérifie sachant qu'on part de la date actuelle console.log(d);

30/10/2019, 11h07
anti91

bonjour et merci pour ta réponses .

ça à l'air simple comme ça ;-) ....

ma difficulté , c'est associé ton code avec la valeur saisi dans input date_debut ....

je ne sais pas comment récupérer la valeur " this.value " pour lui rajouter les 15 mois ....
30/10/2019, 11h37
ProgElecT

Salut

Code:

var dateRepondu=new Date(document.getElementById("date_debut").value);

Motif de l'édit::oops:
Il fallait faire
var dateRepondu=new Date(document.getElementsByName(""date_debut").value); ou var dateRepondu=new Date(document.getElementById("M1").value);

Essaie ça, d'après le code de Michel:

Code:

1
2
3
4
5
6
7
8
9
document.getElementById("M1").addEventListener("change",(e) => {
 
	var d=new Date(e.target.value); // date de "M1"
	var m=d.getMonth()+15;
	d.setMonth(m);
	// affectation de la date augmentée à "M2"
	document.getElementById("M2").value=Intl.DateTimeFormat({day:"numeric",month:"numeric",year:"numeric"}).format(d);
},
false)

Ce qui suppose que tu enlèves ton événement onchange de la balise "M1";

30/10/2019, 12h09
anti91

merci ,

je test cela et reviens vers vous ....

je n'avais pas vu le message en dessous de ton code javatwister
......

c'est bon cela fonctionne impecc !!!!!!

merci beaucoup pour votre aide ......:)

c'est donc résolu
30/10/2019, 12h25
javatwister

Oui, c'est pourquoi je t'ai donné l'unique code à insérer... en enlevant l'appel de fonction dans la balise.

c'est encore moi , alors cela ne fonctionne pas tout le temps ....

je pense que le choix de la date par datepicker n'aide pas ....

quand je rentre une date via date picker , cela ne fonctionne pas

si je la rentre manuellement comme ça 03/10/2019 dans le M1 , il me met ça 10/06/2020 dans M2 .....

et si je mets 03/06/2019 dans M1 , j'ai ce résultat dans M2 06/06/2020

bizarre non ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
		<input id="M1" class="datepicker" type="text" name="date_debut"  value="" ><br>
                <input id="M2" class="mandat" type="text" name="date_fin"  value="" ><br>
 
        <script>
                        document.getElementById("M1").addEventListener("change",(e) => {
 
                        var d=new Date(e.target.value); // date de "M1"
                        var m=d.getMonth()+15;
                        d.setMonth(m);
                        // affectation de la date augmentée à "M2"
                        document.getElementById("M2").value=Intl.DateTimeFormat({day:"numeric",month:"numeric",year:"numeric"}).format(d);
                        },
                        false)
                </script>

30/10/2019, 13h17
javatwister

Ben non, c'est le format anglais...
30/10/2019, 14h50
anti91

d'accord, mais il n'y a pas 15 mois entre les date ?

et pourquoi d'après toi cela ne fonctionne pas avec datepicker

encore merci pour ton aide
30/10/2019, 16h57
NoSmoking

Bonjour,

Citation:

Envoyé par anti91

et pourquoi d'après toi cela ne fonctionne pas avec datepicker

et si tu nous indiquais le « datepicker » que tu utilises !
30/10/2019, 17h10
javatwister

Citation:

Envoyé par anti91

d'accord, mais il n'y a pas 15 mois entre les date ?

Dans tes 2 exemples, si!

alors je te confirme que,les dates donné ne font pas 15 mois .....ou alors je ne sais plus compter ...

et voila le datepicker que j'utilise :

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
 = js
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults(
    {
        altField: "#datepicker",
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
        dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
        dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yy'
    }
);
 
</script>
 
    <script type="text/javascript">
  $( function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  } );
  </script>

30/10/2019, 18h21
anti91

Citation:

Envoyé par javatwister

Dans tes 2 exemples, si!

03/10/2019 -> 10/06/2020 = 9 mois et qq jours

03/06/2019 -> 06/06/2020 = 12 mois et qq jours
30/10/2019, 18h28
javatwister

Ce que tune comprends pas c'est la lecture à l'anglaise, oû le mois précède le jour.

Citation:

Envoyé par anti91

je pense que le choix de la date par datepicker n'aide pas ....

en HTML5 on peut utiliser des <input type="date",
exemple

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
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>.</title>
</head>
<body>
  <form action="xxx" id="my-Form">
    date dèbut : <input type="date" name="dateDeb"> 
    date Fin :     <input type="date" name="dateFin">
  </form>
  <script>
    const myForm = document.querySelector('#my-Form')
 
    // 1: local date  values, time = 0
    const sysDate   = new Date()  
        , localDate = new Date(Date.UTC( sysDate.getFullYear(), sysDate.getMonth(), sysDate.getDate()
                                       , sysDate.getHours(), sysDate.getMinutes(), 0) )
 
    function Plus_15_mois(D)
      {
      if (D instanceof Date)  // D is a valid date
        {
        let R = new Date(D.getTime())
        R.setMonth(R.getMonth()+15)
        return R
        }
      else return localDate // sinon // return null
      } 
 
    // initialization des dates au chargement de la page
    myForm.dateDeb.valueAsDate = localDate
    myForm.dateFin.valueAsDate = Plus_15_mois(localDate) 
 
    myForm.dateDeb.onchange =_=>
      {
      myForm.dateFin.valueAsDate = Plus_15_mois(myForm.dateDeb.valueAsDate) 
      }
  </script>
</body>
</html>

, c'est quand même plus ""simple"" non ?

Sinon des datePicker il y en a des milliers ( https://github.com/search?l=JavaScri...e=Repositories )

Je ne sais pas lequel tu utilises, mais visiblement il à l'air pourri ! :mrgreen:

le plus populaire étant https://amsul.ca/pickadate.js/date/ très complet!

31/10/2019, 12h09
anti91

Citation:

Envoyé par javatwister

Ce que tune comprends pas c'est la lecture à l'anglaise, oû le mois précède le jour.

Ah ok, milles excuses , je n'avais pas compris cela .....

merci

@psychadelic :

Citation:

en HTML5 on peut utiliser des <input type="date",

Tout à fait d'accord mais le rendu d'affichage est vraiment très différent d'un navigateur à l'autre, pour ceux qui le prennent en compte. Bon d'un autre côté les « navigateurs obsolètes » deviennent de plus en plus rares.

Citation:

Je ne sais pas lequel tu utilises, mais visiblement il à l'air pourri ! :mrgreen:

C'est le datepicker de jQuery UI, d'après les scripts chargés.

Citation:

le plus populaire étant https://amsul.ca/pickadate.js/date/ très complet!

Sur gitHub uniquement, car il y celui de jQuery UI et celui de BootStrap qui sont très utilisés ;)

@anti91 :
Comment peux-tu avoir les deux formats de date dans le même code source ?

Si tu utilises le datepicker de jQuery UI alors pourquoi ne pas l'utiliser correctement et notamment l'option onClose ?
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 $(function() { $(".datepicker").datepicker({ changeMonth: true, changeYear: true, onClose: function(date, inst) { // pour tout savoir sur console.log(inst); // efface résultat $("#M2").val(""); // calcul date fin if (date) { // récup. de la date let laDate = inst.input.datepicker("getDate"); console.log("Date début :", laDate); // ajout de 15 mois laDate.setMonth(laDate.getMonth() + 15); console.log("Date après :", laDate); // formattage de la date laDate = Intl.DateTimeFormat({ day: "numeric", month: "numeric", year: "numeric" }).format(laDate); // affiche résultat $("#M2").val(laDate); } } }); });
C'est sûrement à améliorer et tu peux supprimer tous les console.log().

Il te faut bien sûr virer les événements placés directement dans les balises, sous peine de surprise.
Code:

1 2 <input id="M1" class="datepicker" type="text" name="date_debut" value=""> <input id="M2" class="mandat" type="text" name="date_fin" value="">
Nota : J'espère que tu n'utilises pas jQuery uniquement pour le datePicker !