Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Ajouter 15 mois à une date
    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>

  2. #2
    Membre expérimenté
    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);

  3. #3
    Nouveau membre du Club
    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 ....

  4. #4
    Rédacteur/Modérateur

    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);
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  5. #5
    Expert confirmé
    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";

  6. #6
    Nouveau membre du Club
    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

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

  8. #8
    Nouveau membre du Club
    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>

  9. #9
    Expert confirmé
    Ben non, c'est le format anglais...

  10. #10
    Nouveau membre du Club
    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

  11. #11
    Modérateur

    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 !

  12. #12
    Expert confirmé
    Citation Envoyé par anti91 Voir le message
    d'accord, mais il n'y a pas 15 mois entre les date ?
    Dans tes 2 exemples, si!

  13. ###raw>post.musername###
    Nouveau membre du Club
    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>
      0  0

  14. #14
    Nouveau membre du Club
    Citation Envoyé par javatwister Voir le message
    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

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

  16. #16
    Expert confirmé
    Citation Envoyé par anti91 Voir le message
    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!
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  17. #17
    Nouveau membre du Club
    Citation Envoyé par javatwister Voir le message
    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

  18. #18
    Modérateur

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

###raw>template_hook.ano_emploi###