jquery ui 多日期选择器数据范围没有周末

Question

我正在使用这个multidate picker。是否可以使用不选择周末的日期范围模式？

我已经完成了多日期选择器，其中周末被阻止，用户只能选择 5 天，但这不是我的目标。我想要这个功能：当用户点击特定日期时，将突出显示范围内的五天而没有周末...

我的代码如下：

jQuery('#deliverydate').multiDatesPicker({
   minDate:0,
   beforeShowDay: noWeekendsOrHolidays,
   mode: 'daysRangeWithoutWeekends', 
   autoselectRange: [0,5],
   numberOfMonths: 2            
});

现在我已经很接近自己的解决方案了：

如果日期范围内有周末，我计算所有必须启用的天数和所有必须选择的新天数。

我在 multidatepicker.js daysRangeWithoutWeekends 中添加了我的新方法，我计算了所有新的和禁用的天数。然后我使用两个 foreach 循环来禁用和启用新日期：

$.each(all_removed_dates, function(index, value) { 
    methods.removeDates.call(obj, value);
});

$.each(all_new_dates, function(index, value) { 
     methods.addDates.call(obj,value);
});

值是日期对象。第一个 foreach 循环完美运行并删除了所有突出显示的周末，但第二个循环不起作用。它返回我错误：

Empty array of dates received.

你知道为什么吗？

对于所有你不明白我的目标是什么：

如果我点击 21.6.2012 日期 21.6.、22.6、25.6、26.6.、27.6，我必须在没有周末的范围内选择 5 天。必须选择。

使用上面的代码，我设法在周末删除突出显示的课程，但不知道为什么第二个循环（看我的代码上面）没有突出显示 26.6.2012 和 27.6.2012。

Answer 1

仅在星期日禁用：添加选项 beforeShowDay: noWeekendsOrHolidays

function noWeekendsOrHolidays(date) {
    DateRemove = date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate();
    if (date.getDay() == 0) { // remove dimanche
        return [false, ''];
    } else {
        return [true, ''];
    }
}

如果您在控制台中出现错误：错误：收到的日期为空数组。 在 jquery-ui.multidatepicker.js 中 寻找“addDates：函数（日期，类型）”并添加返回true；

addDates : function( dates, type ) {
            if(dates.length > 0) {
                if(!type) type = 'picked';
                switch(typeof dates) {
                    case 'object':
                    case 'array':
                        if(dates.length) {
                            for(var i = 0; i < dates.length; i++)
                                addDate.call(this, dates[i], type, true);
                            sortDates.call(this, type);
                            break;
                        } // else does the same as 'string'
                    case 'string':
                    case 'number':
                        addDate.call(this, dates, type);
                        break;
                    default: 
                        $.error('Date format "'+ typeof dates +'" not allowed on jQuery.multiDatesPicker');
                }
                //$(this).datepicker('refresh');
            } else {
                return true; // ADD THIS ONE
                $.error('Empty array of dates received.');
            }
        },

Answer 2

使用以下代码更改 daysRange 大小写

案例'daysRange'：

this.multiDatesPicker.dates[type] = []; // deletes all picked/disabled 
var end = this.multiDatesPicker.autoselectRange[1];
var begin = this.multiDatesPicker.autoselectRange[0];
if(end < begin) { // switch
    end = this.multiDatesPicker.autoselectRange[0];
    begin = this.multiDatesPicker.autoselectRange[1];
}

var i1=begin;
var i2=begin;
while(i1<end){
    var tep= new Date(methods.sumDays(date, i2));
    if(tep.getDay()!=0 && tep.getDay()!=6){
        methods.addDates.call(this, methods.sumDays(date, i2), type);
        i1++;
    }
    i2++;
}

Answer 3

也许只是循环并修改数组内容会起作用？

if (this.multiDatesPicker.mode === 'daysRangeWithoutWeekends' && this.multiDatesPicker.dates.picked.length > 0) {
    var i = 0,
        saturdayFound = false,
        sundayFound = false;
    for (i = 0; i < this.multiDatesPicker.dates.picked.length; i += 1) {
        if (this.multiDatesPicker.dates.picked[i].getDay() === 6) {
            this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(2); //make it Monday
            saturdayFound = true;
        }
        if (this.multiDatesPicker.dates.picked[i].getDay() === 0) {
            this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(1); //make it Monday
            sundayFound = true;
        }
        if (saturdayFound || sundayFound) {
            //weekend exists before this element in the array
            if ((this.multiDatesPicker.dates.picked[i].getDay() > 0) || (this.multiDatesPicker.dates.picked[i].getDay() < 6)) {
                //weekday found following weekend
                if (saturdayFound) {
                    this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(1); //add a day to offset for Saturday
                }
                if (sundayFound) {
                    this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(1); //add a day to offset for Sunday
                }
            }
        }
    }
    all_new_dates = this.multiDatesPicker.dates.picked;
}

Answer 4

你为什么不试试这个

methods.addDates.call(obj,all_new_dates);

而不是这个

$.each(all_new_dates, function(index, value) { 
     methods.addDates.call(obj,value);
});

Answer 5

首先，这不是通用的解决方案。我没有时间寻求通用解决方案。我的解决方案是，如果您必须在没有周末的范围内选择 5 天。

在 jquery-ui.multidatepicker.js 中 onSelect 方法（cca.81 行）添加：

if(this.multiDatesPicker.mode == 'daysRangeWithoutWeekends'  && this.multiDatesPicker.dates.picked.length > 0){
      var i = 0,
      last

      if(this.multiDatesPicker.dates.picked[0].getDay() == 2){  //thusday
           i = 1
           //remove sunday
           all_removed_dates.push(this.multiDatesPicker.dates.picked[4])
      } 
      if(this.multiDatesPicker.dates.picked[0].getDay() == 3){//wednesday
           i = 2 
           //remove sunday and saturday 
           all_removed_dates.push(this.multiDatesPicker.dates.picked[3],                      this.multiDatesPicker.dates.picked[4])
      }
      if(this.multiDatesPicker.dates.picked[0].getDay() == 4){ //thursday
           i=2
           all_removed_dates.push(this.multiDatesPicker.dates.picked[2], this.multiDatesPicker.dates.picked[3])                                   
      }  
      if(this.multiDatesPicker.dates.picked[0].getDay() == 5){ //friday
           i=2
           all_removed_dates.push(this.multiDatesPicker.dates.picked[1], this.multiDatesPicker.dates.picked[2])                                   
      } 

      last = this.multiDatesPicker.dates.picked.pop()
      this.multiDatesPicker.dates.picked.push(last)

      if(this.multiDatesPicker.dates.picked[0].getDay() == 2){ //thusday
            //if we have thusday we add 2 day after last day so last day in range was saturday and we add 2 day and we get date for monday
            var new_date = new Date(last.getFullYear(), last.getMonth(), last.getDate() + 2)
            all_new_dates.push(new_date)
      }else{
          //if there were sunday and saturday in range we add 2 days to last date in range
          for(var j = 1; j <= i; j++){
                var new_date = new Date(last.getFullYear(), last.getMonth(), last.getDate() + j)
                all_new_dates.push(new_date)
          }
      }

      var obj = this
      //remove sunday and saturday 
      $.each(all_removed_dates, function(index, value) { 
          methods.removeDates.call(obj, value);
      });
      //add new days                                  
      $.each(all_new_dates, function(index, value) { 
          methods.add_new_date.call(obj,value);
      });                             
}

在 jquery-ui.multidatepicker.js 中的 toogleDate 方法中（cca.431 行）在 case 'daysRange' 之前添加：

case 'daysRangeWithoutWeekends':

在 jquery-ui.multidatepicker.js 中 setMode(cca.473row) 在 case 'daysRange' 之前添加：

case 'daysRangeWithoutWeekends':

calander 初始化为：

jQuery('#deliverydate').multiDatesPicker({
   minDate:0,
   beforeShowDay: noWeekendsOrHolidays,
   mode: 'daysRangeWithoutWeekends', 
   autoselectRange: [0,5],
   numberOfMonths: 2            
});

如果有人制作通用算法，请分享=）