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
- onSelect: function(dateText, inst) {
-
-
- var checkIn = new Date(dateText);
-
- alert(checkIn);
- var checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000);
- var startTime = checkIn.getTime(), endTime = checkOut.getTime();
-
-
- var selectedDates=new Array();
- var kk=1;
- for(loopTime = startTime; loopTime <= endTime; loopTime += 86400000)
- {
- //alert(kk);
- day=new Date(loopTime);
-
- selectedDates[kk]=new Array();
- selectedDates[kk][1]=day.getDate();
- selectedDates[kk][2]=day.getFullYear();
- selectedDates[kk][0]=day.getMonth()+1;
-
- kk++;
- //here I should somehow change the class or css for selectedDates.....
- }
- //reinitiate the datePicker
- showSelectedDays(checkIn,checkOut,selectedDates);
- },
Any IDea to help me not to initiate the datePicker again?
the full script is
- <script>
-
- $(document).ready(function() {
-
-
- $.ajax({
- url: "/houses/isAvailble/<?=$Acid;?>",
- data: "action=showdates&id=1",
- dataType: "json",
- success: function(calendarEvents2){
-
-
- calendarEvents=calendarEvents2.dates;
- $("#bookCalendar").datepicker({
-
- // [rows, columns] if you want to display multiple calendars.
- numberOfMonths: [1, 3],
- maxDate:calendarEvents.maxDate,
- minDate:'+1d',
-
- showCurrentAtPos: 0,
- dateFormat: 'yy-mm-dd',
- onSelect: function(dateText, inst) {
-
-
- var checkIn = new Date(dateText);
-
- alert(checkIn);
- var checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000);
- var startTime = checkIn.getTime(), endTime = checkOut.getTime();
-
-
- var selectedDates=new Array();
- var kk=1;
- for(loopTime = startTime; loopTime <= endTime; loopTime += 86400000)
- {
- //alert(kk);
- day=new Date(loopTime);
-
- selectedDates[kk]=new Array();
- selectedDates[kk][1]=day.getDate();
- selectedDates[kk][2]=day.getFullYear();
- selectedDates[kk][0]=day.getMonth()+1;
-
- kk++;
- }
-
- showSelectedDays(checkIn,checkOut,selectedDates);
- },
- beforeShowDay: function (date){
- for (i = 0; i < calendarEvents.length; i++) {
- if (date.getMonth() == calendarEvents[i][0] - 1
- && date.getDate() == calendarEvents[i][1]
- && date.getFullYear() == calendarEvents[i][2]) {
- //[disable/enable, class for styling appearance, tool tip]
- return [calendarEvents[i]['enabled'],calendarEvents[i]['class'],calendarEvents[i]['booking']];
- }
- }
- return [true, ""];//enable all other days
- }
- });
- }
- });
-
- function showSelectedDays(checkIn,checkOut,selectedDates){
-
-
- //console.log(selectedDates);
-
-
- //show selected days
-
- dateMax=new Date(checkOut);
- dateMin=new Date(checkIn);
-
-
- //alert(new Date('2011-01-02'));
- $("#bookCalendar").datepicker("destroy");
- $("#bookCalendar").datepicker({
-
- // [rows, columns] if you want to display multiple calendars.
- numberOfMonths: 3,
- maxDate:'+10m',
- minDate:'+1d',
-
- showAnim:'fold',
- defaultDate:checkIn,
- onSelect: function(dateText, inst) {
-
-
- var checkIn = new Date(dateText);
-
- alert(checkIn);
- var checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000);
- var startTime = checkIn.getTime(), endTime = checkOut.getTime();
-
-
- var selectedDates=new Array();
- var kk=1;
- for(loopTime = startTime; loopTime <= endTime; loopTime += 86400000)
- {
- //alert(kk);
- day=new Date(loopTime);
-
- selectedDates[kk]=new Array();
- selectedDates[kk][1]=day.getDate();
- selectedDates[kk][2]=day.getFullYear();
- selectedDates[kk][0]=day.getMonth()+1;
-
- kk++;
- }
-
- showSelectedDays(checkIn,checkOut,selectedDates);
- },
-
- beforeShowDay: function (date){
- for (i = 1; i < selectedDates.length; i++) {
- if (date.getMonth() == selectedDates[i][0] - 1
- && date.getDate() == selectedDates[i][1]
- && date.getFullYear() == selectedDates[i][2]) {
- //[disable/enable, class for styling appearance, tool tip]
- return [false,'ui-booking-BB','Selected Days'];
- }
- }
- for (i = 0; i < calendarEvents.length; i++) {
- if (date.getMonth() == calendarEvents[i][0] - 1
- && date.getDate() == calendarEvents[i][1]
- && date.getFullYear() == calendarEvents[i][2]) {
- //[disable/enable, class for styling appearance, tool tip]
- return [calendarEvents[i]['enabled'],calendarEvents[i]['class'],calendarEvents[i]['booking']];
- }
- }
- },
-
-
- dateFormat: 'yy-mm-dd'
-
-
-
- });
-
-
-
- }
-
- });</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