jquery ui datepicker onselect loop and change days

Question

I need a bit of help. On jQuery UI datepicker how to loop through all dates like it is possible to do in beforeShowDay?

I have the following code:

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 months, on the last month the datepicker disappears with error:

G is not defined

working example

<script>






     $(document).ready(function() {


    $.ajax({
  url: "/houses/isAvailble/<?=$Acid;?>",
  data: "action=showdates&id=1",
  dataType: "json",
  success: function(calendarEvents2){
  $('#travelDuration').combobox('destroy').combobox();
var selectedDates=new Array();
 var travelDuration=$('#travelDuration').val();
  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 start=0;
var step=0;
var origDay=new Date(dateText);




var checkOutDates=new Array();












           for (i = 0; i < calendarEvents.length; i++) {
var thisDay=calendarEvents[i][2]+'-'+ calendarEvents[i][0]+'-'+calendarEvents[i][1];
//finding user checked day,if so setting step=1
           if (dateText===thisDay) {

                            //setting minimum Stay
                                var minDays=calendarEvents[i]['minimumStay'];

//setting a marker that started
                var start=1;
                //setting step,so days passed
                          var step=0;
//setting minimum travelDuration
if(travelDuration){


console.log(travelDuration);
}else{
                   travelDuration=minDays;

                   }
$('#travelDuration').html(' ');
}




if(start>0 ){




//console.log(calendarEvents[i]['change']);
if(calendarEvents[i]['change']=='X' && calendarEvents[i]['state']=='N'){

break;


//console.log(calendarEvents[i]);

}

if((calendarEvents[i]['change']=='O' || calendarEvents[i]['change']=='C')&& start>minDays){

var thisDayDate=new Date(thisDay);
///http://stackoverflow.com/questions/327429/whats-the-best-way-to-calculate-date-difference-in-javascript
var dateDif=thisDayDate.getTime()-origDay.getTime() ;

 var dayQty=dateDif/86400000


//console.log(dateDif+'-'+dayQty);






     $('#travelDuration').
          append($("<option></option>").
          attr("value",dayQty).
          text(dayQty));




}







start=start+1;

}




                              }











$('#travelDuration').combobox('destroy').combobox();




 var checkIn = new Date(dateText);



 selectedDates=[];
//alert(travelDuration-1);




                             var   checkOut=new Date(checkIn.getTime() + (minDays-1)*24*60*60*1000);
var startTime = checkIn.getTime(), endTime = checkOut.getTime();



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++;
}


 $("#bookCalendar").datepicker("refresh");


   $('#travelDuration').change(function(){


       travelDuration= $('#travelDuration').val();














              selectedDates=[];
                             // alert(travelDuration-1);




                             var   checkOut=new Date(checkIn.getTime() + (travelDuration-1)*24*60*60*1000);
                                     var startTime = checkIn.getTime(), endTime = checkOut.getTime();



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++;
}














       $('#bookCalendar').datepicker("refresh");


         });




},
           beforeShowDay: function (date){

var returnDay=Array();
var index=date.getFullYear()+date.getMonth()+date.getDate();


returnDay[index]=Array();

if(selectedDates){
//console.log(selectedDates);
           for (i = 1; i < selectedDates.length; i++) {

                              if (date.getMonth() == selectedDates[i][0] - 1
                              && date.getDate() == selectedDates[i][1]
                              && date.getFullYear() == selectedDates[i][2]) {

                           returnDay[index]['class']='ui-booking-BB';

                              }
                           }



}



                          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]





                              if(returnDay[index]['class']){
                                          returnDay[index]['enabled']=calendarEvents[i]['enabled'];
                                           returnDay[index]['booking']="Your Choosen Dates";
                              }
                              else{

                              returnDay[index]['class']=calendarEvents[i]['class'];
                              returnDay[index]['enabled']=calendarEvents[i]['enabled'];
 returnDay[index]['booking']=calendarEvents[i]['booking'];
                              }
                              }
                           }
                        return [returnDay[index]['enabled'],returnDay[index]['class'],returnDay[index]['booking']];
                        }
           });
           }
         });







         });

</script>

I will try to find time to write in my blog about it. Thanks guy!

Add the working code to your own question and notify Amith so he'll edit his own answer. — Shadow The GPT Wizard, May 30 '11 at 10:09

score 0 · Accepted Answer · answered May 30 '11 at 04:11

0

Its a bit difficult to follow what you are trying to do. From what I understand, once a user selects a day, you need to re-render the datepicker, so that certain dates (the selected dates?) are not selectable.

Heres my attempt at it. Declare the calendarEvents and selectedDates as global. Just before the end of the onSelect function, instead of calling showSelectedDays, call inst.refresh(); inst is the datepicker instance that is passed in as the second parameter of the onSelect callback.

As per the documentation, refresh() will cause the datepicker to re-render, thus calling the beforeShowDay for each date. And because selectedDates is global, beforeShowDay will always use the most recently selected date range ...

It will actually be easier for us to help you, if you could link to a demo page where you are facing the problem. Maybe you could use jsfiddle.net to create a bare-minimum demo for this question ...

answered May 30 '11 at 04:11

Amith George

5,806
2
35
53

here is a demo online http://booking.georates.info/shoppingcart/booknow/AT7323.100.1.html Try to choose any CHOOSABLE date and you will see that minimum days that are required are colored green. when you try to make monthes BACK after some back the datepicker dissapears. In console you get G not defined. inst.refresh is VERY good idea....can you give a simple code? – MR.GEWA May 30 '11 at 06:59
hi @Amith George thanks a lot.. Your hint about refresh did the trick. Despite inst.refresh(); is giving error, but with another way the same idea worked. Thanks!!! a lot!!!!! – MR.GEWA May 30 '11 at 09:56
hey, glad to be of help. Though as @shadow suggested, could you post the code that worked? Even I am interested to see how you did it ... :) You could post a link to a gist/fiddle if its too long to post in the comments ... – Amith George May 30 '11 at 12:27
@Amith George the question edited and the working part is over there ... If you will have an idea how to optomize it (as you see looping on the same array too many times) then you are welcome – MR.GEWA May 30 '11 at 21:01
the working exemple is http://booking.georates.info/shoppingcart/booknow/FR8800.15.1.html – MR.GEWA May 30 '11 at 21:10

jquery ui datepicker onselect loop and change days

1 Answers1