jQuery Forum

Hi... i need  a bit help ....On jquery ui datepicker how to loop through all dates like it is possible to make in beforeShowDay???



I have

1.       onSelect: function(dateText, inst) {
2.    
3.    
4.      var checkIn = new Date(dateText);
5.    
6.      alert(checkIn);
7.                                  var   checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000);
8.     var startTime = checkIn.getTime(), endTime = checkOut.getTime();
9.    
10.    
11.     var selectedDates=new Array();
12.     var kk=1;
13.     for(loopTime = startTime; loopTime <= endTime; loopTime += 86400000)
14.     {
15.     //alert(kk);
16.     day=new Date(loopTime);
17.    
18.     selectedDates[kk]=new Array();
19.     selectedDates[kk][1]=day.getDate();
20.     selectedDates[kk][2]=day.getFullYear();
21.     selectedDates[kk][0]=day.getMonth()+1;
22.    
23.     kk++;
24. //here I should somehow change the class or css for selectedDates.....
25.     }
26.     //reinitiate the datePicker
27.     showSelectedDays(checkIn,checkOut,selectedDates);
28.     },

Any IDea to help me not to initiate the datePicker again?









the full script is

   

1.     <script>
2.    
3.          $(document).ready(function() {
4.    
5.    
6.         $.ajax({
7.       url: "/houses/isAvailble/<?=$Acid;?>",
8.       data: "action=showdates&id=1",
9.       dataType: "json",
10.       success: function(calendarEvents2){
11.    
12.    
13.       calendarEvents=calendarEvents2.dates;
14.                $("#bookCalendar").datepicker({
15.    
16.                // [rows, columns] if you want to display multiple calendars.
17.                numberOfMonths: [1, 3],
18.                maxDate:calendarEvents.maxDate,
19.                 minDate:'+1d',
20.             
21.                showCurrentAtPos: 0,
22.               dateFormat: 'yy-mm-dd',
23.                onSelect: function(dateText, inst) {
24.    
25.               
26.      var checkIn = new Date(dateText);
27.    
28.      alert(checkIn);
29.                                  var   checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000);
30.     var startTime = checkIn.getTime(), endTime = checkOut.getTime();
31.    
32.    
33.     var selectedDates=new Array();
34.     var kk=1;
35.     for(loopTime = startTime; loopTime <= endTime; loopTime += 86400000)
36.     {
37.     //alert(kk);
38.     day=new Date(loopTime);
39.    
40.     selectedDates[kk]=new Array();
41.     selectedDates[kk][1]=day.getDate();
42.     selectedDates[kk][2]=day.getFullYear();
43.     selectedDates[kk][0]=day.getMonth()+1;
44.    
45.     kk++;
46.     }
47.    
48.     showSelectedDays(checkIn,checkOut,selectedDates);
49.     },
50.                beforeShowDay: function (date){
51.                               for (i = 0; i < calendarEvents.length; i++) {
52.                                   if (date.getMonth() == calendarEvents[i][0] - 1
53.                                   && date.getDate() == calendarEvents[i][1]
54.                                   && date.getFullYear() == calendarEvents[i][2]) {
55.                                   //[disable/enable, class for styling appearance, tool tip]
56.                                   return [calendarEvents[i]['enabled'],calendarEvents[i]['class'],calendarEvents[i]['booking']];
57.                                   }
58.                                }
59.                                return [true, ""];//enable all other days
60.                             }
61.                });
62.                }
63.              });
64.    
65.     function showSelectedDays(checkIn,checkOut,selectedDates){
66.    
67.    
68.     //console.log(selectedDates);
69.    
70.    
71.                                      //show selected days
72.    
73.      dateMax=new Date(checkOut);
74.                     dateMin=new Date(checkIn);
75.    
76.    
77.                    //alert(new Date('2011-01-02'));
78.                                     $("#bookCalendar").datepicker("destroy");
79.                                       $("#bookCalendar").datepicker({
80.    
81.                // [rows, columns] if you want to display multiple calendars.
82.                  numberOfMonths: 3,
83.                         maxDate:'+10m',
84.                 minDate:'+1d',
85.             
86.                        showAnim:'fold',
87.                        defaultDate:checkIn,
88.                     onSelect: function(dateText, inst) {
89.    
90.    
91.      var checkIn = new Date(dateText);
92.    
93.      alert(checkIn);
94.                                  var   checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000);
95.     var startTime = checkIn.getTime(), endTime = checkOut.getTime();
96.    
97.    
98.     var selectedDates=new Array();
99.     var kk=1;
100.     for(loopTime = startTime; loopTime <= endTime; loopTime += 86400000)
101.     {
102.     //alert(kk);
103.     day=new Date(loopTime);
104.    
105.     selectedDates[kk]=new Array();
106.     selectedDates[kk][1]=day.getDate();
107.     selectedDates[kk][2]=day.getFullYear();
108.     selectedDates[kk][0]=day.getMonth()+1;
109.    
110.     kk++;
111.     }
112.    
113.     showSelectedDays(checkIn,checkOut,selectedDates);
114.     },
115.    
116.                    beforeShowDay: function (date){
117.                               for (i = 1; i < selectedDates.length; i++) {
118.                                   if (date.getMonth() == selectedDates[i][0] - 1
119.                                   && date.getDate() == selectedDates[i][1]
120.                                   && date.getFullYear() == selectedDates[i][2]) {
121.                                   //[disable/enable, class for styling appearance, tool tip]
122.                                   return [false,'ui-booking-BB','Selected Days'];
123.                                   }
124.                                }
125.                                   for (i = 0; i < calendarEvents.length; i++) {
126.                                   if (date.getMonth() == calendarEvents[i][0] - 1
127.                                   && date.getDate() == calendarEvents[i][1]
128.                                   && date.getFullYear() == calendarEvents[i][2]) {
129.                                   //[disable/enable, class for styling appearance, tool tip]
130.                                   return [calendarEvents[i]['enabled'],calendarEvents[i]['class'],calendarEvents[i]['booking']];
131.                                   }
132.                                }
133.                             },
134.    
135.    
136.                    dateFormat: 'yy-mm-dd'
137.    
138.    
139.    
140.                 });
141.    
142.    
143.    
144.     }
145.    
146.              });</script>

The problem, that gives re-initiation, is that when I make Back,Back,Back to the previous monthes, on the last month the datepicker disappears with error

G is not defined