Discussion :

[Djeros]

Salut à toutes et à tous,
j'ai mis en place un calendrier dans lequel l'utilisateur sélectionne les dates qui l'intéressent en cliquant dessus, ce qui change leur couleur. Puis, en validant le calendrier, elles apparaissent dans un formulaire à côté du calendrier, par ordre croissant, une par une, sous la forme, par exemple, '30 mars 2014'.

Si l'utilisateur sélectionne plusieurs jours consécutifs, je souhaiterais que ceux-ci apparaissent récapitulés au sein de expression "Du ... au" , non pas un par un comme c'est le cas en ce moment.

Quelqu'un a-t-il une idée sur ce que dois faire pour obtenir ce résultat ? Merci à tous pour vos apports , bon dimanche - et n'oubliez pas de voter !,

Djeros

PD : Le calendrier en question a été développé par Nick Baicoianu. Vous pouvez le trouver ici : http://www.javascriptkit.com/script/...ch/index.shtml
Je l'ai reskinné et modifié pour l'adapter à mes besoins.

[SylvainPV]

Bonjour

Dans l'ordre logique, ce serait :

1) récupérer les dates sélectionnées sous forme d'Array
2) les trier par date croissante (a priori c'est fait)
3) dans la partie du code responsable de ton affichage "dans le formulaire à côté", vérifier qu'elles correspondent à une plage de jours consécutive
4) si c'est le cas, générer comme HTML : "Du "+mesDates[0]+" au "+mesDates[mesDates.length - 1], sinon laisser la génération telle qu'actuellement

Dis-nous à quelle étape tu bloques, en indiquant le code que tu as essayé.

[Djeros]

Salut à toi SylvainPV,
l'étape que je n'arrive pas à passer, est précisément la création de la fonction qui identifiera les dates comme étant consécutives. Pour info, voici la partie de code qui gère tout ça, c'est-à-dire, mise en forme des dates en français avec noms de jours, tri par date croissante, affichage dans la zone où je mettrai le formulaire et insertion dans le container (une div) :

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
validSelected.onclick = function validDate() {
  this.owner.selectedDates.sort(function (a, b) { // Pour trier les dates - To sort the dates by crescent order
    if (a < b) {
      return -1;
    } else if (a > b) {
      return 1;
    } else {
      return 0;
    };
  });
  // Mets les dates dans le paragraphe créé - Put the selected dates in the created <p>
  document.getElementById('paragraph').innerHTML = this.owner.selectedDates.toLocaleString().replace(/ 00:00:00,*/g, '<br />');
  //this.owner.selectedDates.toLocaleString().replace(/ 00:00:00,*/g, '\n')); 	// Affiche la date au format français et enlève les hh/mm/ss
  // Display the date in a french format and remove hh/mm/ss
};
 
container.appendChild(clearSelected);
container.appendChild(validSelected);
container.appendChild(paragraph);
 
return container;

Voilou,

[Djeros]

Bonsoir,
je n'ai pas beaucoup avancé sur mon problème car je ne sais pas du tout comment le formaliser en une fonction.

Par contre, il faut que je prenne en compte deux autres possibilités, à savoir, que l'utilisateur puisse sélectionner quelques dates qui seront consécutives et d'autre pas, mais aussi plusieurs groupes de dates consécutives séparés par un ou plusieurs jours.
Ce dernier cas sera donc traité par la fonction ... que je n'arrive pas à faire, et qui renverrai alors deux/des phrase du type : 'du ... au ' et 'du ... au'.

En résumé, cela donnerait :
1- Tri de toutes les dates
2- Voir s'il y a des jours consécutifs (AAArgg ...)
3- Créer un/des tableaux constitué des jours consécutifs
4- Dans le premier tableau, enlever autant d'éléments que de jours consécutifs
5- Re-générer le premier tableau
6- Formatage des dates
7- Les afficher avec innerHTML ='du'+ss-tab[jour0]+'au' etc .

Voila, quelque chose comme ça. Mais il se fait tard, je continuerai demain, Tchouss,

Djeros

[SylvainPV]

selectedDates est une Array de Date, pas une seule Date. C'est pour ça que toLocaleDateString ne donnait rien dans l'autre topic.

Je ne peux pas tester car je n'ai pas tout ton code, mais à l'instinct j'aurais fait comme ça :

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
validSelected.onclick = function validDate() {    
    var aDayLong = 24*3600*1000;
    var intervals = [];
    var lastDate = null;
 
    this.owner.selectedDates.sort(function (a, b){ return a-b;    });    
 
    for(var d=0, l=this.owner.selectedDates.length; d<l; d++){
        var date = this.owner.selectedDates[d];
        if(lastDate != null && date-lastDate <= aDayLong){
            intervals[intervals.length - 1].push(date);
        } else {
            intervals.push([ date ]);
        }
        lastDate = date;
    }
 
 
    document.getElementById('paragraph').innerHTML = intervals.map(function(interval){
        if(interval.length === 1){
           return interval[0].toLocaleDateString();
        } else {
           return "Du " + interval[0].toLocaleDateString() 
                + " au " + interval[interval.length - 1].toLocaleDateString();
        }     
    }).join("<br>");
 
 
};

[Djeros]

Bonjour Sylvain,
me revoilu, frais et dispos. Je vais de ce pas réinsérer ce que tu m'as envoyé pour voir ce qui se passe et je tiens au courant.

En tout cas, d'ores et déjà un grand merci pour ton attention ; je débute en js. - et en programmation tout court, et toute aide qui m'est accordée est un encouragement qui me donne du cœur à l'ouvrage.

A plus tard pour des nouvelles du calendrier,

Djeros

[Djeros]

Voilà, j'ai réinséré le code que tu as proposé, mais cela ne fonctionne pas ; bien entendu, tu n'avais pas toutes les données - tout le code, du problème.

Par contre, est-ce que tu pourrais m'expliquer ce que tu as fait ? Car j'ai pas mal de questions, qui peuvent se résumer à ... je ne comprends pas ce que tu as fait (pas tout en tout cas) - ni pourquoi ^^ :
Par exemple, à quoi sert la variable aDayLong ? Je comprends bien qu'elle est définie par la durée d'une journée en milli s., mais la raison de sa présence m'échappe, ainsi que son utilisation dans le if ...

Pour lastDate, pourquoi l'initialiser à null et à quoi sert-elle ? etc ... Bref.

Sinon, éventuellement, souhaites-tu que je te transmette les 3 fichiers (html, css, et js(le gros morecau)) en mp ? Je peux y adjoindre quelques commentaires dans un .txt quant à la structure du code du calendrier - env. 800 lignes, pas excessivement complexe puisque j'ai pu m'y retrouver et que je débute en js, mais code dont la totalité te permettra peut-être de voir ce qui cloche ?

A bientôt

[SylvainPV]

Mon idée a été, plutôt que de distinguer des dates fixes et des intervalles de dates, de considérer qu'une date fixe est une liste (Array) d'une seule date, tandis que les intervalles sont des listes contenant autant de dates que de jours sélectionnés dans cet intervalle.

J'ai commenté mon code :

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
validSelected.onclick = function validDate() {    
    var aDayLong = 24*3600*1000; //durée d'un jour en millisecondes
    var intervals = []; //liste d'intervalles
    var lastDate = null; //dernière date parcourue, initialement aucune
 
    this.owner.selectedDates.sort(function (a, b){ return a-b;    }); //tri des dates par ordre croissant
 
    for(var d=0, l=this.owner.selectedDates.length; d<l; d++){ //je parcoure les dates
        var date = this.owner.selectedDates[d]; //date est la date actuellement parcourue
        if(lastDate != null && date-lastDate <= aDayLong){ //si on a déjà lu une date et que l'écart entre cette dernière date et la date actuellement lue est inférieur ou égal à un jour
            if(intervals.length === 0){ intervals.push([]); } //j'en profite pour corriger un bug que j'avais omis, dans le cas où il n'existe pas encore d'intervalle créé, on en crée un
            intervals[intervals.length - 1].push(date); //alors ce sont des dates consécutives: je l'ajoute au dernier intervalle créé
        } else { // sinon ce sont des dates séparées
            intervals.push([ date ]); // donc on crée un nouvel intervalle
        }
        lastDate = date; //on enregistre la dernière date parcourue
    }
 
 
    document.getElementById('paragraph').innerHTML = intervals.map(function(interval){ //je remplace les intervalles par des String
        if(interval.length === 1){ //un intervalle d'une seule date est une date fixe isolée (ex: 31/12/2013)
           return interval[0].toLocaleDateString(); //je renvoie le premier et unique élément au format DD/MM/YYYY
        } else { //sinon c'est une liste de jours consécutifs
           return "Du " + interval[0].toLocaleDateString() //Du _premier jour de l'intervalle_
                + " au " + interval[interval.length - 1].toLocaleDateString(); //au _dernier jour de l'intervalle_
        }     
    }).join("<br>"); //on colle bout à bout les String générées avec des tags <br> pour passer à la ligne entre les dates
 
 
};

Evidemment, ce code non testé doit sûrement comporter quelques erreurs ou choses que je n'ai pas pris en compte parce que je n'en avais pas connaissance. Si tu le peux, peux-tu coller le code HTML/CSS/JS généré sur un outil en ligne tel que jsfiddle.net ? On évite les messages privés, le but de ce forum est de partager l'information.

[Djeros]

Hello,
merci d'avoir ajouté les commentaires. Je viens de prendre connaissance de ta réponse. Ça me semble bien ; par contre, la fonction de tri que tu proposes plante le programme, donc j'ai remis celle que j'avais, et effectivement, le calendrier s'affiche à nouveau.

Enfin, comme tu le dis, n'ayant pas tout le code, ça ne fonctionne pas pour l'instant : la sélection avec changement de couleur des date sélectionnées s'effectue, mais aucun des deux boutons - annuler/valider ne fonctionne.

Je vais donc essayer de modifier ce que tu proposes ; si ça marche, je poste ce que j'ai fait ; si ça ne marche pas, je vais voir pour poster la totalité du code sur le site jsfiddle.

Merci encore et à bientôt.

[Djeros]

A mon humble avis de débutant , le souci viens de lastDate car, hormis l'indication de null/!null, comment fait le programme pour savoir qu'il s'agit de la dernière date lue ? Peut-être avec d-1 ? Je 'va' essayer ça ...

[Djeros]

Oups, j'avais fait une bêtise ; j'avais enlevé des lignes de codes qui activaient les boutons ..... dsl pour le contretemps. Donc le calendrier fonctionne, mais pas encore le regroupement par contiguïté de jours. En tout cas, ça avance

[Djeros]

Gravos !!! Youpi ça marche. Tel quel ton code : nickel. Trop content. Du coup une dernière question qui reprend ce que je disais ci-dessus : comment le programme comprend-il que lastDate est la dernière date parcourue ?

Voilou en tout cas, merci merci merci pour ton aide. Quant au code complet, une fois que j'aurais fini de travailler dessus, je ferai un commit sur GitHub (en n'oubliant pas mentionner ton aide, c'est une évidence pour moi) et le signalerai ici ; comme ça, tout le monde pourra en profiter.

Merci et bravo, big level, tchouss,

Djeros

[SylvainPV]

De rien

Pour répondre à ta question, c'est cette simple ligne :

Code :

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

lastDate = date; //on enregistre la dernière date parcourue

A la fin de chaque tour de boucle, on stocke la date de l'itération actuelle dans la case lastDate. Au prochain tour de boucle, elle correspondra donc à l'ancienne valeur.