Retour

jQuery UI Datepicker

 

CAJQ : Club des Amis de jQuery
Planning des activités pour le second semestre

Date:

view source
print?
001(function($){
002    var nomJours = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];
003     
004    var nomMois = ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"];
005     
006    var vacances = [[13, 7, 2009],[14, 7, 2009],[15, 7, 2009],[16, 7, 2009],[17, 7, 2009],[20, 7, 2009],[21, 7, 2009],[22, 7, 2009],[23, 7, 2009],[24, 7, 2009],[23, 12, 2009],[24, 12, 2009],[25, 12, 2009],[26, 12, 2009],[27, 12, 2009],[28, 12, 2009],[29, 12, 2009],[30, 12, 2009],[31, 12, 2009]];
007     
008    var reunions = [[9, 7, 2009],[12, 8, 2009],[17, 9, 2009],[22, 10, 2009],[26, 11, 2009],[22, 12, 2009]];
009     
010    var reserver = [[18, 8, 2009]];
011             
012    setDays = function(day, month, year) {
013        var result = [true, '', ''];    //par défaut, on affiche la date
014        var boolVacances = false;
015        var boolReunion = false;
016        var boolLundiMercredi = false;
017        var rl = 0;
018        var i = 0;
019         
020        /*
021        * Les données peuvent contenir, par erreur, des chevauchements de dates !
022        * Priorité des événements : Vacances > Reunion > LundiMercredi > Reserver !
023        * Évite l'ajout de la "class" d'un événement non prioritaire !
024        */
025         
026        if (vacances != null) {
027            rl = vacances.length;
028         
029            for (i = 0; i < rl; i++) {
030                if ((day == vacances[i][0]) && (month == vacances[i][1] - 1) && (year == vacances[i][2])) {
031                    result = [false, '', "On est en vacances !"];
032                    boolVacances = true;
033                }
034            }
035        }
036     
037        if ((!boolVacances) && (reunions != null)) {
038            rl = reunions.length;
039         
040            for (i = 0; i < rl; i++) {
041                if ((day == reunions[i][0]) && (month == reunions[i][1] - 1) && (year == reunions[i][2])) {
042                    result = [true, "important", "Réunion !"];
043                    boolReunion = true;
044                }
045            }
046        }
047                         
048        //getDay() retourne un entier correspondant au jour de la semaine
049        // 0 (dimanche), 1 (lundi), 2 (mardi), 3 (mercredi), 4 (jeudi), 5 (vendredi), 6 (samedi)
050        var jourSemaine = new Date(year, month, day).getDay();
051         
052        if ((!boolReunion) && (!boolVacances) && ((jourSemaine == 1) || (jourSemaine == 3))) {
053            result = [true, "lundiMercredi", 'Loisirs studieux !'];
054            boolLundiMercredi = true;
055        }
056     
057        if ((!boolReunion) && (!boolVacances) && (!boolLundiMercredi) && (reserver != null)) {
058            rl = reserver.length;
059         
060            for (i = 0; i < rl; i++) {
061                if ((day == reserver[i][0]) && (month == reserver[i][1] - 1) && (year == reserver[i][2])) {
062                    result = [true, "reserver", "La salle des jeux est déjà réservée !"];
063                }
064            }
065        }
066                                     
067        return result;
068    }
069     
070    selectedDay = function(day, month, year) {
071        var boolReunion = false;
072        var boolLundiMercredi = false;
073        var boolReserver = false;
074        var rl = 0;
075        var i = 0;
076         
077        /*
078        * Les données peuvent contenir, par erreur, des chevauchements de dates !
079        * Priorité des événements : Vacances > Reunion > LundiMercredi > Reserver !
080        * Ici on ne s'occupe pas des jours de vacances puisque l'utilisateur ne peut pas les choisir !
081        */
082         
083        //getDay() retourne un entier correspondant au jour de la semaine
084        // 0 (dimanche), 1 (lundi), 2 (mardi), 3 (mercredi), 4 (jeudi), 5 (vendredi), 6 (samedi)
085        var jourSemaine = new Date(year, month, day).getDay();
086         
087        $("#affiche").html("<p>Vous avez sélectionné le " +
088                                                nomJours[jourSemaine] + " " + day + " " + nomMois[month] + " " + year + "</p>");
089         
090        if (reunions != null) {
091            rl = reunions.length;
092             
093            for (i = 0; i < rl; i++) {
094                if ((day == reunions[i][0]) && (month == reunions[i][1] - 1) && (year == reunions[i][2])) {
095                    $("#important").dialog("open");
096                    boolReunion = true;
097                }
098            }
099        }
100         
101        // Il ne faut pas afficher le dialogue lundiMercredi s'il s'agit d'un jour de réunion !
102        if ((!boolReunion) && ((jourSemaine == 1) || (jourSemaine == 3))) {
103            $("#lundiMercredi").dialog("open");
104            boolLundiMercredi = true;
105        }
106     
107        if ((!boolReunion) && (!boolLundiMercredi) && (reserver != null)) {
108            rl = reserver.length;
109         
110            for (i = 0; i < rl; i++) {
111                if ((day == reserver[i][0]) && (month == reserver[i][1] - 1) && (year == reserver[i][2])) {
112                    boolReserver = true;
113                }
114            }
115        }
116         
117        /*
118        * Ce n'est pas un jour de réunion !
119        * Ce n'est ni un lundi ni un mercredi !
120        * La salle des jeux n'est pas encore réservée !
121        * La date n'est pas dépassée !
122        */
123        if ((!boolReunion) && (!boolLundiMercredi) && (!boolReserver) && (new Date(year,month,day) >= new Date())) {
124            reserver.push([day, month+1, year]);
125            $("#affiche").append("<p style='margin-top:12px;'>Votre réservation de la salle des jeux est enregistrée pour la date ci-dessus.</p>");
126        } else {
127            $("#affiche").append("<p style='margin-top:12px;'>Désolé, la salle des jeux est déjà réservée<br />ou le jour choisi n'est pas disponible (lundi,mercredi et les jours de réunions)<br />ou la date choisie est dépassée.</p>");
128        }
129         
130        //$("#ui-datepicker-div").mouseover();
131    }
132 
133    $(document).ready(function(){
134        $("#lundiMercredi").dialog({
135            autoOpen: false,
136            height: 240,
137            width: 400,
138            modal: true,
139            overlay: {
140                backgroundColor: '#000000',
141                opacity: 0.5
142            },
143            buttons: {
144                'Fermer': function() {
145                    $(this).dialog('close');
146                }
147            },
148            close: function() {
149                // pour colorer les dates choisies chaque fois que le datepicker se redessine !
150                $("#ui-datepicker-div").mouseover();
151            }
152        });
153         
154        $("#important").dialog({
155            autoOpen: false,
156            height: 240,
157            width: 400,
158            modal: true,
159            overlay: {
160                backgroundColor: '#000000',
161                opacity: 0.5
162            },
163            buttons: {
164                'Fermer': function() {
165                    $(this).dialog('close');
166                }
167            },
168            close: function() {
169                // pour colorer les dates choisies chaque fois que le datepicker se redessine !
170                $("#ui-datepicker-div").mouseover();
171            }
172        });
173         
174        $("#datepicker").datepicker({
175            changeMonth: true,
176            changeYear: true,
177            showButtonPanel: true,
178            currentText: "Aujourd'hui",
179            nextText: "Suivant",
180            prevText: "Précédent",
181            showOn: "button",
182            buttonText: "Choisir une date",
183            dateFormat: "DD, d MM yy",
184            beforeShowDay: function(date) {
185                var noWeekend = $.datepicker.noWeekends(date); //samedi et dimanche non sélectionable !
186                //var noWeekend = [true, '', '']; // on garde le samedi et le dimanche !
187                 
188                if (noWeekend[0]) {
189                    return setDays(date.getDate(), date.getMonth(), date.getFullYear());
190                } else {
191                    return noWeekend;
192                }
193                 
194                /*
195                * Si parmi les dates à colorer il y a des samedis ou des dimanches alors
196                * mettez en commentaire tout ce qui précède et remplacez-le par :
197                * return setDays(date.getDate(), date.getMonth(), date.getFullYear());
198                */
199            },
200            onSelect: function(dateText) {
201                //le format de dateText est donné par l'option dateFormat
202                //transforme la date donnée au format texte (Mardi, 4 Août 2009) en day (4), month (7), year (2009)
203                var dt = dateText.split(' ');
204                var month;
205                                                                 
206                switch(dt[2]){
207                    case "Janvier":
208                        month = 0;
209                        break;
210                    case "Février":
211                        month = 1;
212                        break;
213                    case "Mars":
214                        month = 2;
215                        break;
216                    case "Avril":
217                        month = 3;
218                        break;
219                    case "Mai":
220                        month = 4;
221                        break;
222                    case "Juin":
223                        month = 5;
224                        break;
225                    case "Juillet":
226                        month = 6;
227                        break;
228                    case "Août":
229                        month = 7;
230                        break;
231                    case "Septembre":
232                        month = 8;
233                        break;
234                    case "Octobre":
235                        month = 9;
236                        break;
237                    case "Novembre":
238                        month = 10;
239                        break;
240                    case "Décembre":
241                        month = 11;
242                        break;
243                    default:
244                        alert("erreur de date dans la fonction onSelect du Datepicker");
245                        break;
246                };
247                 
248                selectedDay(
249                    parseInt(dt[1],10),
250                    month,
251                    parseInt(dt[3],10)
252                );
253            }
254        });
255    }); //fin document ready
256     
257    $(window).load(function(){
258        /*
259        * Bricolage indispensable pour colorer les dates choisies
260        * chaque fois que le datepicker se redessine !
261        */
262        $("#ui-datepicker-div").bind("mouseover", function(){
263            if ($("td.important > a", this).eq(0).css("color") != "#FF0000") {
264                $("td.important > a", this).css("color","#FF0000");
265                $("td.lundiMercredi > a", this).css("color","#33CC00");
266                $("td.reserver > a", this).css("color","#0033CC");
267            }
268        });
269         
270        // nécessaire s'il n'y a pas de bouton
271        $("#datepicker").click(function(){
272            $("#ui-datepicker-div").mouseover();
273        });
274         
275        // nécessaire s'il y a un bouton
276        $("button.ui-datepicker-trigger").click(function(){
277            $("#ui-datepicker-div").mouseover();
278        });
279    }); //fin window load
280})(jQuery);