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