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

Posted 2023-02-25

【中文标题】jquery ui 多日期选择器数据范围没有周末

【英文标题】：jquery ui multi dates picker data range without weekends

【发布时间】：2012-06-12 05:14:03

【问题描述】：

我正在使用这个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。

【问题讨论】：

你在哪里输入那五天？？>..你有开始日期和结束日期之类的东西吗？？

你的意思是自动计算结束日期，开始日期和5天不包括周末？？

你能多写一些代码，展示你如何填充all_new_dates

@gašper 最好用您的代码更新您的问题，而不是添加答案。在您的代码中，您在哪里声明/分配all_removed_dates 和all_new_dates？

【参考方案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.');
            
        ,

【参考方案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++;

【参考方案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;

【参考方案4】：

你为什么不试试这个

methods.addDates.call(obj,all_new_dates);

而不是这个

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

【参考方案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            
);

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