Discussion :

[anti91]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Michel]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ....

[ProgElecT]

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[javatwister]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[javatwister]

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

[anti91]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[javatwister]

Ben non, c'est le format anglais...

[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

[NoSmoking]

Bonjour,

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

et si tu nous indiquais le « datepicker » que tu utilises !

[javatwister]

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

Dans tes 2 exemples, si!

[anti91]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[anti91]

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

[javatwister]

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

[psychadelic]

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

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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

[anti91]

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

[NoSmoking]

@psychadelic :

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.

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

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 !