jquery ui datepicker onselect循环和更改日期

Question

我需要一些帮助。在jQuery UI datepicker上如何遍历所有日期，就像在beforeShowDay中可以做到的那样？

我有以下代码：

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);
},

是否有任何想法可以帮助我不再发起datePicker？

完整的脚本是：

<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>

重新启动的问题是，当我回到过去几个月时，在上个月，日期选择器消失了，错误：

  

G未定义

工作示例

<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>

我会尽量抽出时间在我的博客中写一下这篇文章。谢谢你！

Answer 1

有点难以理解你想要做的事情。根据我的理解，一旦用户选择了一天，您需要重新渲染日期选择器，以便某些日期（所选日期？）不可选。

继承我的尝试。将calendarEvents和selectedDates声明为全局。就在onSelect函数结束之前，不要调用showSelectedDays，而是调用inst.refresh(); inst是作为onSelect回调的第二个参数传入的datepicker实例。

根据documentation，refresh（）将导致datepicker重新渲染，从而为每个日期调用beforeShowDay。并且因为selectedDates是全局的，所以beforeShowDay将始终使用最近选择的日期范围......

如果您可以链接到您遇到问题的演示页面，我们实际上会更容易为您提供帮助。也许你可以使用jsfiddle.net为这个问题创建一个极简的演示......