JQuery UI DatePicker OnSlect цикл и изменить дни - PullRequest
Новая
       0

JQuery UI DatePicker OnSlect цикл и изменить дни

0 голосов
/ 29 мая 2011

Мне нужна помощь. На 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);
////293804/kak-luchshe-vsego-rasschitat-raznitsu-v-date-v-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>

Я постараюсь найти время, чтобы написать об этом в своем блоге. Спасибо, парень!

1 Ответ

0 голосов
/ 30 мая 2011

Немного трудно следить за тем, что вы пытаетесь сделать. Из того, что я понимаю, когда пользователь выбирает день, вам необходимо повторно отобразить средство выбора даты, чтобы определенные даты (выбранные даты?) Не могли быть выбраны.

Вот моя попытка. Объявите calendarEvents и selectedDates как глобальные. Непосредственно перед завершением функции onSelect вместо вызова showSelectedDays вызовите inst.refresh(); inst - это экземпляр datepicker, который передается как второй параметр обратного вызова onSelect.

В соответствии с документацией , refresh () вызовет повторный рендеринг DatePicker, вызывая beforeShowDay для каждой даты. А так как selectedDates является глобальным, beforeShowDay всегда будет использовать последний выбранный диапазон дат ...

Нам будет проще помочь вам, если вы перейдете по ссылке на демонстрационную страницу, где вы столкнулись с проблемой. Может быть, вы могли бы использовать jsfiddle.net , чтобы создать минимальную демоверсию для этого вопроса ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...