IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

JavaScript Discussion :

Calcul détail des jours entre deux dates pour insérer dans un tableau


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Médecin
    Inscrit en
    Octobre 2018
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Médecin
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2018
    Messages : 11
    Points : 3
    Points
    3
    Par défaut Calcul détail des jours entre deux dates pour insérer dans un tableau
    Bonjour,

    Je suis médecin dans une petite structure, et j'ai la charmante tâche de gérer la gestion documentaire de notre établissement.

    Notre logiciel de gestion documentaire s'ouvre sur des pages web et utilise donc le même "langage".

    Je suis en train de tenter d'apprendre à bidouiller le javascript, mais je rencontre un problème donc je n'arrive pas à me sortir...

    Pour faire simple, j'ai créé un formulaire qui permettra aux utilisateurs d'entrer la date de début et la date de fin de leur arrêt maladie.

    Pour ce faire, j'ai utilisé deux objets qui s'appellent :
    - Objdatedebut (en pratique l'utilisateur peut sélectionner une date, en l'occurrence celle du début de l'arrêt maladie)
    - Objdatefin (l'utilisateur sélectionne la date de fin de l'arrêt maladie)

    J'ai un troisième objet qui est un tableau (en réalité, mon formulaire appelle ce type de tableau un tableau "répéteur") à trois colonnes (Colonne 1 = année ; Colonne 2 = mois ; Colonne 3 = jours), que l'on peut appeler Objtableau .

    Je souhaiterais que le tableau se modifie en fonction de la date de début et de la date de fin de telle sorte que je connaisse le nombre de jours de chaque mois de cet arrêt maladie.

    A titre d'exemple, et pour mieux vous faire comprendre, pour quelqu’un absent du 29/10/2021 au 02/01/2022, ce dernier va sur la page web sélectionner la date de début (29/10/2021) puis la date de fin (02/01/2022) de l'arrêt maladie.
    Je souhaiterais que le tableau présente 3 colonnes (Année, Mois et Jour(s)), ainsi que 5 lignes :

    Entre le 29/10/2021 (date du début de l'arrêt maladie) et le 31/10/2021 il y a 3 jours.
    Entre le 01/11/2021 et le 30/11/2021 il y a 30 jours.
    Entre le 01/12/2021 et le 31/12/2021 il y a 31 jours.
    Entre le 01/01/2022 et le 02/01/2022 il y a 2 jours.

    Année Mois Jour(s)
    2021 Octobre 3
    2021 Novembre 30
    2021 Décembre 31
    2022 Janvier 2

    J'ai essayé une multitudes de choses mais je n'y arrive pas. Et j'en suis loin.
    J'arrive à avoir le nombre de jours entre le jour de début de l'arrêt et le jour de fin qui s'affiche dans un objet texte qui se trouve dans une cellule du tableau, mais ce n'est pas du tout suffisant pour utiliser le tableau de bord qui sera issu. L'idée étant en effet, de pouvoir utiliser les données issues de plusieurs formulaires pour faire un tableau de bord qui donnerait en temps réel, le nombre de jours d'arrêt depuis le début de l'année, et de nombreuses autres statistiques.

    Je suis débutant, mais j'ai très envie d'apprendre.

    Je vous remercie par avance pour l'aide et les conseils que vous pourrez m'apporter.

    Anthony

  2. #2
    Expert éminent sénior

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2013
    Messages
    2 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2013
    Messages : 2 174
    Points : 11 289
    Points
    11 289
    Billets dans le blog
    5
    Par défaut
    Bonjour, voici une façon de procéder, le code est commenté
    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
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang=''>
     
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <title></title>
        <link rel='stylesheet' href=''>
    </head>
     
    <body>
            <input id='start' type='date' name='start'>
            <input id='end' type='date' name='end'>
            <button id='validate' type='submit'>ok</button>
     
        <script>
            const handleDays = () => {
                let start = new Date(document.getElementById('start').value);//onrécupère les dates entrées
                let end = new Date(document.getElementById('end').value);
                let result = [];//on mettra les resultats dans un tableau
                for (let year = start.getFullYear(); year <= end.getFullYear(); year++) {//on boucle sur les années
                    let firstMonth = year === start.getFullYear() ? start.getMonth() : 0; // on test si l'année est l'année de la date de départ, on affecte le mois sinon 0 (janvier)
                    let lastMonth = year === end.getFullYear() ? end.getMonth() : 11; //idem(decembre)
                    for (let month = firstMonth; month <= lastMonth; month++) {//on refait la meme opération sur les mois
                        let firstDay = year === start.getFullYear() && month === firstMonth ? start.getDate() : 1;
                        let lastDay = year === end.getFullYear() && month === lastMonth ? end.getDate() : 0;
                        let lastDateMonth = lastDay === 0 ? (month + 1) : month
                        let firstDate = new Date(year, month, firstDay);
                        let lastDate = new Date(year, lastDateMonth, lastDay);
                        result.push({//on créé un objet et on met dans un tableau
                            "year": year,
                            "month": month,
                            "nbDays": parseInt((lastDate - firstDate) / (24 * 3600 * 1000)) + 1//calcul du nombre de jours entre 2 dates
                        })
                    }
                }
                return result;
            }
     
            document.getElementById('validate').addEventListener('click',(e)=>{
                console.log(handleDays());
            })
     
        </script>
    </body>
     
    </html>
    Tu récupères donc un tableau d'objet qui peut te servir à l'affichage et aux autres calculs dont tu aurais besoin

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    méthode un peu « absconse », à la lecture, mais terriblement efficace

  4. #4
    Candidat au Club
    Homme Profil pro
    Médecin
    Inscrit en
    Octobre 2018
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Médecin
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2018
    Messages : 11
    Points : 3
    Points
    3
    Par défaut
    Bonjour,

    Tout d'abord, je tiens à vous remercier pour le temps pris pour me lire et l'aide proposée.

    J'ai mis un peu de temps à tester votre solution, mon principal travail étant médecin... je ne m'occupe de notre gestion documentaire que lors de mes temps libres...

    Je suis navré de constater que cette solution ne fonctionne pas.

    En effet, j'ai modifié les noms 'start' et 'end' par 'Datearret' et 'Datefinarret' pour correspondre aux noms des composants dates, mais lorsque je teste la page, absolument rien ne se passe.

    Je pense que cela provient du fait que je ne peux qu'écrire du code Javascript, or il y a des balises html, et également cela vient du fait qu'il y a dans le code un "bouton" pour valider après avoir noté les deux dates, or dans ma page, je n'ai qu'à cliquer sur les composants dates (date de début et date de fin) pour qu'un calendrier s'ouvre et me permette de sélectionner la bonne date.

    Cette première image vous montre comment fonctionne la création de ma page de formulaire depuis mon logiciel de gestion documentaire (qui fonctionne comme un "site" web). Vous avez sur votre droite le nom des composants qui constituent mon formulaire.

    Nom : Capture d’écran 2021-12-03 à 08.51.24.png
Affichages : 171
Taille : 526,0 Ko

    Cette seconde image vous montre comment se présente mon éditeur de Javascript:

    Nom : Capture d’écran 2021-12-03 à 08.51.38.png
Affichages : 159
Taille : 415,4 Ko

    Enfin, ce code vous montre le code source de la page :

    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
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
      <input type="hidden" id="CompStylesCSSJSON" value="%7B%7D"> 
      <div class="row" data-rowname="Row_1"> 
       <div class="col-md-12 col-sm-12 col-12 column col-xl-12 col-lg-12" id="Column_1" data-colname="Column_1"> 
        <div class="ge-content ge-content-type-ckeditor" data-ge-content-type="ckeditor" id="editor1" instance-name="editor1"><table class="align-center" id="EnTete" style="border-collapse:collapse; border-color:#3366cc; border-spacing:1px; border-style:solid; border-width:4px; font-size:inherit; width:1200px" border="1">
    	<tbody>
    		<tr>
    			<td style="border-collapse:collapse; border-color:#3366cc; border-style:solid; border-width:4px; padding:5px; width:459.5px"><img id="LOGO" src="https://qualios.lamaisondegardanne.fr:8086/servlet/qualios.image?image=40&amp;type=jpg" style="width: 400px;" title=""><br>
    			</td>
    			<td style="border-collapse:collapse; border-color:#3366cc; border-style:solid; border-width:4px; padding:5px; text-align:center; width:736.75px"><span style="color:#3366cc; font-size:24px; font-weight:bold">Formulaire de déclaration d'arrêt de travail</span></td>
    		</tr>
    	</tbody>
    </table>
    <br>
    <p><br>
    </p>
    <br>
    </div> 
       </div> 
      </div> 
      <div class="row" data-rowname="Row_2"> 
       <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 column" id="Column_2" data-colname="Column_2"> 
        <div class="ge-content ge-content-type-ckeditor" data-ge-content-type="ckeditor" id="editor2"> 
         <table class="align-center" id="TVDEMANDESCONGES" style="border-collapse:collapse; border-color:#3366cc; border-spacing:1px; border-style:solid; border-width:4px; font-size:inherit; width:1200px" border="1"> 
          <tbody> 
           <tr> 
            <td style="border-collapse:collapse; border-color:#3366cc; border-style:solid; border-width:4px; padding:5px"> 
             <table id="TVDEMANDECONGES" style="border-spacing:1px; font-size:inherit; width:100%"> 
              <tbody> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><span style="font-weight:bold"><span style="color:#3366cc; font-family:Arial; font-size:18px">Nom</span><span style="color:#3366cc; font-family:Arial; font-size:15px">&nbsp;&nbsp;</span><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Nom" maxlength="30" name="Nom" placeholder="" size="40.5" style="color: rgb(51, 102, 204); font-family: arial; font-size: 18px; text-align: center; width: 200px;" title="" type="text" data-libelle="Nom" data-obligatoire="0"></span><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><span style="font-weight:bold"><span style="color:#3366cc; font-size:15px">&nbsp;</span><span style="color:#3366cc; font-family:Arial; font-size:18px"> Prénom</span><span style="color:#3366cc; font-size:15px">&nbsp;&nbsp;</span><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Prenom" maxlength="30" name="Prenom" placeholder="" size="40.5" style="color: rgb(51, 102, 204); font-family: arial; font-size: 18px; text-align: center; width: 200px;" title="" type="text" data-libelle="Prénom" data-obligatoire="0">&nbsp; &nbsp; &nbsp;&nbsp; <span style="font-family:Arial; font-size:15px"><span style="font-size:18px">&nbsp;</span> &nbsp; </span></span><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; vertical-align:top; width:268px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Fonction : </span><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold"><select data-btnaccessource="0" data-btnsupprvisible="1" data-compsurveille="0" data-dernierenrver="Oui" data-listeoption="" data-nivactif="1" data-typecomp="LISTE" data-visible="1" data-zonetype="Formulaire" id="Fonction" name="Fonction" size="1" style="font-family: arial; font-size: 18px; width: 200px;" title="" data-libelle="Fonction" data-obligatoire="0" data-nomsource1="Mise en activité automatique-Formulaires-Fonctions salariés pour DAF et DRH" data-nomsource2="1" data-nomchamp="ZTfonctiondusalarie" data-filtre="" data-pagination="0" data-valeurmere="" data-contenudans="" data-statutenr="Actif" data-affichage="Par ordre alphabétique" data-distinct="0"></select> </span><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Date de l'arrêt :</span><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><span style="font-weight:bold"><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Date" id="Datearret" maxlength="10" name="Datearret" placeholder="" size="10" title="" type="text" data-libelle="Date de l'arrêt" data-obligatoire="0"></span><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Fin de l'arrêt :</span><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><span style="font-weight:bold"><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Date" id="Datefinarret" maxlength="10" name="Datefinarret" placeholder="" size="10" title="" type="text" data-libelle="Date de fin de l'arrêt" data-obligatoire="0"></span><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Remarques libres</span><br> </td> 
                <td style="padding:5px; text-align:left; vertical-align:top; width:914.067px"><textarea cols="50" data-bordervide="1" data-compsurveille="0" data-nivactif="1" data-typecomp="MEMO" data-visible="1" id="Memoremarqueconges" name="Memoremarqueconges" placeholder="" rows="5" style="background: transparent; border-color: rgb(51, 102, 204); border-width: 4px; color: rgb(51, 102, 204); font-family: arial; font-size: 18px; text-align: left;" title="" data-libelle="Memoremarqueconges" data-obligatoire="0"> </textarea><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; text-align:left; width:914.067px"><br> </td> 
               </tr> 
               <tr> 
                <td style="padding:5px; text-align:left; width:268.117px"><br> </td> 
                <td style="padding:5px; width:914.067px">&nbsp; &nbsp;&nbsp;</td> 
               </tr> 
              </tbody> 
             </table> </td> 
           </tr> 
          </tbody> 
         </table> 
         <br> 
         <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <br> 
        </div> 
       </div> 
      </div> 
      <div class="row" data-rowname="Row_3"> 
       <div class="column col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="Column_3" data-colname="Column_3" style=""> 
        <div class="ge-content ge-content-type-ckeditor" data-ge-content-type="ckeditor" id="editor3">
         <span style="display:none">&nbsp;</span> 
         <table data-bordervide="1" data-cacherbtndernierecolonne="1" data-cacherbtndessoustableau="1" data-cachercolonne="0" data-colonne="$||$0$||$@;@$||$0$||$@;@$||$0$||$" data-entetefixe="0" data-libelle="TRAnneesmois" data-nivactif="1" data-trierligne="1" data-typecomp="TABREP" data-visible="1" id="TRAnneesmois" name="TRAnneesmois" title=""> 
          <thead> 
           <tr> 
            <th>Année<br> </th> 
            <th>Mois<br> </th> 
            <th>Jour(s)<br> </th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr> 
            <td><input data-compsurveille="0" data-libelle="Année" data-nivactif="1" data-numcol="1" data-obligatoire="0" data-simasque="0" data-tabrep="TRAnneesmois" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Annee" maxlength="30" name="Annee" placeholder="" size="40.5" title="" type="text"><br> </td> 
            <td><input data-compsurveille="0" data-libelle="Mois" data-nivactif="1" data-numcol="2" data-obligatoire="0" data-simasque="0" data-tabrep="TRAnneesmois" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Mois" maxlength="30" name="Mois" placeholder="" size="40.5" title="" type="text"><br> </td> 
            <td><input data-compsurveille="0" data-libelle="Jour(s)" data-nivactif="1" data-numcol="3" data-obligatoire="0" data-simasque="0" data-tabrep="TRAnneesmois" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Jour" maxlength="30" name="Jour" placeholder="" size="40.5" title="" type="text"><br> </td> 
           </tr> 
          </tbody> 
         </table> 
         <br> 
         <br> 
         <input data-codejavascript="" data-execution="1" data-libelle="JavaScript" data-nivactif="1" data-typecomp="JAVASCRIPT" id="JavaScript" name="JavaScript" type="button" value="JavaScript">
         <br> 
        </div> 
        <div class="row" data-rowname="Row_4"></div> 
       </div> 
      </div> 
     
     
    <style id="CompStylesCSS"> </style>



    Je ne sais pas si une personne d'entre vous saurez comment ajouter des lignes à un tableau répétiteur en fonction de l'écart entre la date de début et la date de fin de l'arrêt...

    Si vous avez des idées... j'en serais ravi.

    Merci d'avance,

    Anthony

  5. #5
    Expert éminent sénior

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2013
    Messages
    2 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2013
    Messages : 2 174
    Points : 11 289
    Points
    11 289
    Billets dans le blog
    5
    Par défaut
    C'est normal de ne rien voir, j'ai juste fait un console.log du resultat
    le code suivant met dans le tableau, dans le html du message precedant les inputs sont de type text, je suppose qu'il y a un date piclker. Il faudra peut etre addapter mais les dates à rentrer sont du type 'mm/dd/yyyy'. il restera aussi à mettre le nom du mois à la place de son numéro.
    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
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    <!DOCTYPE html>
    <html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="">
    </head>
     
    <body>
     
     
     
     
     
        <input type="hidden" id="CompStylesCSSJSON" value="%7B%7D">
        <div class="row" data-rowname="Row_1">
            <div class="col-md-12 col-sm-12 col-12 column col-xl-12 col-lg-12" id="Column_1" data-colname="Column_1">
                <div class="ge-content ge-content-type-ckeditor" data-ge-content-type="ckeditor" id="editor1" instance-name="editor1">
                    <table class="align-center" id="EnTete" style="border-collapse:collapse; border-color:#3366cc; border-spacing:1px; border-style:solid; border-width:4px; font-size:inherit; width:1200px" border="1">
                        <tbody>
                            <tr>
                                <td style="border-collapse:collapse; border-color:#3366cc; border-style:solid; border-width:4px; padding:5px; width:459.5px"><img id="LOGO" src="https://qualios.lamaisondegardanne.fr:8086/servlet/qualios.image?image=40&amp;type=jpg" style="width: 400px;" title=""><br>
                                </td>
                                <td style="border-collapse:collapse; border-color:#3366cc; border-style:solid; border-width:4px; padding:5px; text-align:center; width:736.75px"><span style="color:#3366cc; font-size:24px; font-weight:bold">Formulaire de déclaration d'arrêt de travail</span></td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                    <p><br>
                    </p>
                    <br>
                </div>
            </div>
        </div>
        <div class="row" data-rowname="Row_2">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 column" id="Column_2" data-colname="Column_2">
                <div class="ge-content ge-content-type-ckeditor" data-ge-content-type="ckeditor" id="editor2">
                    <table class="align-center" id="TVDEMANDESCONGES" style="border-collapse:collapse; border-color:#3366cc; border-spacing:1px; border-style:solid; border-width:4px; font-size:inherit; width:1200px" border="1">
                        <tbody>
                            <tr>
                                <td style="border-collapse:collapse; border-color:#3366cc; border-style:solid; border-width:4px; padding:5px">
                                    <table id="TVDEMANDECONGES" style="border-spacing:1px; font-size:inherit; width:100%">
                                        <tbody>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><span style="font-weight:bold"><span style="color:#3366cc; font-family:Arial; font-size:18px">Nom</span><span style="color:#3366cc; font-family:Arial; font-size:15px">&nbsp;&nbsp;</span><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Nom" maxlength="30" name="Nom" placeholder="" size="40.5" style="color: rgb(51, 102, 204); font-family: arial; font-size: 18px; text-align: center; width: 200px;" title="" type="text" data-libelle="Nom" data-obligatoire="0"></span><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><span style="font-weight:bold"><span style="color:#3366cc; font-size:15px">&nbsp;</span><span style="color:#3366cc; font-family:Arial; font-size:18px"> Prénom</span><span style="color:#3366cc; font-size:15px">&nbsp;&nbsp;</span><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Prenom" maxlength="30" name="Prenom" placeholder="" size="40.5" style="color: rgb(51, 102, 204); font-family: arial; font-size: 18px; text-align: center; width: 200px;" title="" type="text" data-libelle="Prénom" data-obligatoire="0">&nbsp; &nbsp; &nbsp;&nbsp; <span style="font-family:Arial; font-size:15px"><span style="font-size:18px">&nbsp;</span> &nbsp; </span></span><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; vertical-align:top; width:268px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Fonction : </span><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold"><select data-btnaccessource="0" data-btnsupprvisible="1" data-compsurveille="0" data-dernierenrver="Oui" data-listeoption="" data-nivactif="1" data-typecomp="LISTE" data-visible="1" data-zonetype="Formulaire" id="Fonction" name="Fonction" size="1" style="font-family: arial; font-size: 18px; width: 200px;" title="" data-libelle="Fonction" data-obligatoire="0" data-nomsource1="Mise en activité automatique-Formulaires-Fonctions salariés pour DAF et DRH" data-nomsource2="1" data-nomchamp="ZTfonctiondusalarie" data-filtre="" data-pagination="0" data-valeurmere="" data-contenudans="" data-statutenr="Actif" data-affichage="Par ordre alphabétique" data-distinct="0"></select> </span><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Date de l'arrêt :</span><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><span style="font-weight:bold"><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Date" id="Datearret" maxlength="10" name="Datearret" placeholder="" size="10" title="" type="text" data-libelle="Date de l'arrêt" data-obligatoire="0"></span><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Fin de l'arrêt :</span><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><span style="font-weight:bold"><input data-compsurveille="0" data-nivactif="1" data-simasque="0" data-typecomp="TEXTE" data-visible="1" data-zonetype="Date" id="Datefinarret" maxlength="10" name="Datefinarret" placeholder="" size="10" title="" type="text" data-libelle="Date de fin de l'arrêt" data-obligatoire="0"></span><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><span style="color:#3366cc; font-family:Arial; font-size:18px; font-weight:bold">Remarques libres</span><br> </td>
                                                <td style="padding:5px; text-align:left; vertical-align:top; width:914.067px"><textarea cols="50" data-bordervide="1" data-compsurveille="0" data-nivactif="1" data-typecomp="MEMO" data-visible="1" id="Memoremarqueconges" name="Memoremarqueconges" placeholder="" rows="5" style="background: transparent; border-color: rgb(51, 102, 204); border-width: 4px; color: rgb(51, 102, 204); font-family: arial; font-size: 18px; text-align: left;" title="" data-libelle="Memoremarqueconges" data-obligatoire="0"> </textarea><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; text-align:left; width:914.067px"><br> </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:5px; text-align:left; width:268.117px"><br> </td>
                                                <td style="padding:5px; width:914.067px">&nbsp; &nbsp;&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                    <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <br>
                </div>
            </div>
        </div>
        <div class="row" data-rowname="Row_3">
            <div class="column col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="Column_3" data-colname="Column_3" style="">
                <div class="ge-content ge-content-type-ckeditor" data-ge-content-type="ckeditor" id="editor3">
                    <span style="display:none">&nbsp;</span>
                    <table data-bordervide="1" data-cacherbtndernierecolonne="1" data-cacherbtndessoustableau="1" data-cachercolonne="0" data-colonne="$||$0$||$@;@$||$0$||$@;@$||$0$||$" data-entetefixe="0" data-libelle="TRAnneesmois" data-nivactif="1" data-trierligne="1" data-typecomp="TABREP" data-visible="1" id="TRAnneesmois" name="TRAnneesmois" title="">
                        <thead>
                            <tr>
                                <th>Année<br> </th>
                                <th>Mois<br> </th>
                                <th>Jour(s)<br> </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input data-compsurveille="0" data-libelle="Année" data-nivactif="1" data-numcol="1" data-obligatoire="0" data-simasque="0" data-tabrep="TRAnneesmois" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Annee" maxlength="30" name="Annee" placeholder="" size="40.5" title="" type="text"><br> </td>
                                <td><input data-compsurveille="0" data-libelle="Mois" data-nivactif="1" data-numcol="2" data-obligatoire="0" data-simasque="0" data-tabrep="TRAnneesmois" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Mois" maxlength="30" name="Mois" placeholder="" size="40.5" title="" type="text"><br> </td>
                                <td><input data-compsurveille="0" data-libelle="Jour(s)" data-nivactif="1" data-numcol="3" data-obligatoire="0" data-simasque="0" data-tabrep="TRAnneesmois" data-typecomp="TEXTE" data-visible="1" data-zonetype="Texte" id="Jour" maxlength="30" name="Jour" placeholder="" size="40.5" title="" type="text"><br> </td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                    <br>
                    <input data-codejavascript="" data-execution="1" data-libelle="JavaScript" data-nivactif="1" data-typecomp="JAVASCRIPT" id="JavaScript" name="JavaScript" type="button" value="JavaScript">
                    <br>
                </div>
                <div class="row" data-rowname="Row_4"></div>
            </div>
        </div>
     
     
        <style id="CompStylesCSS"> </style>
        <script>
            const handleDays = () => {
                let start = new Date(document.getElementById('Datearret').value); //onrécupère les dates entrées
                console.log(start)
                let end = new Date(document.getElementById('Datefinarret').value);
                let result = []; //on mettra les resultats dans un tableau
                for (let year = start.getFullYear(); year <= end.getFullYear(); year++) { //on boucle sur les années
                    let firstMonth = year === start.getFullYear() ? start.getMonth() : 0; // on test si l'année est l'année de la date de départ, on affecte le mois sinon 0 (janvier)
                    let lastMonth = year === end.getFullYear() ? end.getMonth() : 11; //idem(decembre)
                    for (let month = firstMonth; month <= lastMonth; month++) { //on refait la meme opération sur les mois
                        let firstDay = year === start.getFullYear() && month === firstMonth ? start.getDate() : 1;
                        let lastDay = year === end.getFullYear() && month === lastMonth ? end.getDate() : 0;
                        let lastDateMonth = lastDay === 0 ? (month + 1) : month
                        let firstDate = new Date(year, month, firstDay);
                        let lastDate = new Date(year, lastDateMonth, lastDay);
                        result.push({ //on créé un objet et on met dans un tableau
                            "year": year,
                            "month": month,
                            "nbDays": parseInt((lastDate - firstDate) / (24 * 3600 * 1000)) + 1 //calcul du nombre de jours entre 2 dates
                        })
                    }
                }
                return result;
            }
     
            document.getElementById('Datefinarret').addEventListener('focusout', (e) => {
                console.log(handleDays());
                const arretsRepartitions = handleDays();
                const tbody = document.querySelector('#TRAnneesmois tbody')
                let row = '';
                arretsRepartitions.forEach((m,i) => {
                    row += `<tr>
                                <td>${m.year} </td>
                                <td>${m.month} </td>
                                <td>${m.nbDays} </td>
                            </tr>`
                })
                tbody.insertAdjacentHTML('afterbegin',row)
            })
        </script>
    </body></html>

  6. #6
    Candidat au Club
    Homme Profil pro
    Médecin
    Inscrit en
    Octobre 2018
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Médecin
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2018
    Messages : 11
    Points : 3
    Points
    3
    Par défaut
    Bonjour,

    Navré pour mon absence assez prolongée, difficile pour moi de réaliser mes tâches informatiques en plus de mon travail de médecin...

    Depuis mes derniers posts, j'ai réussi à avancer un petit peu pour le code.

    A titre d'exemple, lorsqu'une personne sélectionne une date de début (d1) et une date de fin (d2), si d1 = 01/03/2022 et d2 = 05/05/2022.
    - le tableau à trois colonnes voit son nombre de lignes évoluer pour que chaque mois entre les deux dates s'affiche (dans notre exemple, il apparait trois lignes)
    - la première ligne se remplit toute seule (année, mois en lettres, nombre de jours dans le mois)
    - la dernière ligne se remplit toute seule

    Voici un visuel de ce à quoi correspond le tableau (dans cette photo, le tableau est à trois colonnes)

    Nom : Capture d’écran 2022-03-04 à 17.08.50.png
Affichages : 145
Taille : 198,4 Ko

    Cependant,
    - les lignes intermédiaires ne se remplissent pas
    - mon code ne fonctionne pas lorsque le tableau a seulement deux lignes, à ce moment là seule la première ligne se remplit.

    Je ne sais pas du tout comment attribuer des valeurs aux lignes intermédiaires.

    Dans l'exemple plus haut je voudrais que cela affiche cela :

    Nom : 22.png
Affichages : 141
Taille : 179,4 Ko

    Pouvez-vous m'aider et me dire ce qui ne fonctionne pas ? Je vous remercie par avance.

    Anthony

    Le code est le suivant :

    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    //afficher le nombre de ligne nécessaire au tableau répétiteur
     
     
    var nbmois = LimitDate('', '', '2', 'DatedebutLING', '', '', '', 'datefinLING', '', '', '', '1', '1');
    while(NbRowTabRep('Tableau1_1')< nbmois+2){
     
    InsertRow('Tableau1_1', '1');
     
    }
     
    //remplir le tableau répéteur
     
    // nombre total de jour d'arrêt 
    var nbjourarret = LimitDate('', '', '1', 'DatedebutLING', '', '', '', 'datefinLING', '', '', '', '1', '1');
     
    // nombre de jour du mois de départ de l'arrêt de travail
    var nbjourmoisdebut = NbDayMonth('', 'DatedebutLING', '', '', '', '1');
     
    // numéro du jour de début de l'arrêt
    var numerojourdebut = CutDate('', '2', 'DatedebutLING', '', '', '', '1');
     
    // nom du mois de debut de l'arrêt
    var moisdebut = CutDate('', '11', 'DatedebutLING', '', '', '', '1');
     
    // année de debut de l'arrêt
    var anneedebut = CutDate('', '4', 'DatedebutLING', '', '', '', '1');
     
    // annee de fin arrêt 
    var anneefinarret = CutDate('', '4', 'datefinLING', '', '', '', '1');
     
    // nombre de jour restant dans le mois du début de l'arret 
    var nbjourrestantmois = nbjourmoisdebut-numerojourdebut
     
    // numero de jour de fin de l'arret
    var numerojourfinarret = CutDate('', '2', 'datefinLING', '', '', '', '1');
     
    // difference entre annee fin et annee debut arret
    var anneedifference = anneefinarret - anneedebut
     
    //mois suivant le mois debut
    var moissuivant = moisdebut+1
     
    //afficher le nombre de jour d'arrêt, le nom du premier mois de l'arrêt et l'année de l'arrêt sur la première ligne
    if(nbjourrestantmois<nbjourarret){
    AssignValue('Tableau1@||@2@||@'+1, nbjourrestantmois+1, '1', '2');
    AssignValue('Tableau1@||@1@||@'+1, moisdebut, '1', '2');
    AssignValue('Tableau1@||@0@||@'+1, anneedebut, '1', '2');
    }
    else{
    AssignValue('Tableau1@||@2@||@'+1, nbjourarret+1, '1', '2');
    AssignValue('Tableau1@||@1@||@'+1, moisdebut, '1', '2');
    AssignValue('Tableau1@||@0@||@'+1, anneedebut, '1', '2');
    }
     
    // numéro de ligne où insérer les éléments du dernier mois de l'arrêt
    var z = nbmois+1 ;
     
    // mois de fin de l'arrêt
    var moisfinarret = CutDate('', '11', 'datefinLING', '', '', '', '1');
     
    // nb de jour du dernier mois de l'arrêt
    var jourfinarret = CutDate('', '2', 'datefinLING', '', '', '', '1');
     
    // remplir la dernière ligne du tableau
    if(nbmois > 1){
    AssignValue('Tableau1@||@0@||@'+z, anneefinarret, '1', '2');
    AssignValue('Tableau1@||@1@||@'+z, moisfinarret, '1', '2');
    AssignValue('Tableau1@||@2@||@'+z, jourfinarret, '1', '2');
     
     
    }

Discussions similaires

  1. [AC-2010] Calcul des jours entre deux dates
    Par maranatha-1975 dans le forum Access
    Réponses: 2
    Dernier message: 14/01/2014, 14h53
  2. calcul nombre de jours entre deux dates
    Par charlene44 dans le forum Langage
    Réponses: 7
    Dernier message: 21/08/2012, 15h06
  3. fonction table pour récupérer la liste des jours entre deux dates
    Par elmoul7ak dans le forum Développement
    Réponses: 2
    Dernier message: 01/05/2010, 14h22
  4. [Dates] Calculer différence en jours entre deux dates
    Par looping2b2a dans le forum Langage
    Réponses: 4
    Dernier message: 30/12/2006, 00h32
  5. Générer le listing des jours entre deux dates
    Par gsmdu62 dans le forum Langage
    Réponses: 8
    Dernier message: 01/05/2006, 12h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo