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.