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

时间:2012-06-08 06:10:41

标签: jquery jquery-ui date range jquery-ui-datepicker

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

我已经完成了multidatepicker,周末被阻止,用户只能选择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);
});

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

Empty array of dates received.

你知道为什么吗?

对于所有人,你不明白我的目标是什么: multidatepicker range without weekend

如果我点击21.6.2012日期21.6。,22.6,25.6,26.6。,27.6,我必须在没有周末的情况下选择5天。必须被选中。

使用高级代码我设法在周末删除突出显示的类但不知道为什么第二个循环(看我的代码上部)没有突出显示26.6.2012和27.6.2012。

5 个答案:

答案 0 :(得分:0)

首先,这不是通用的解决方案。我没有时间进行通用解决方案。我的解决方案是你必须在没有周末的情况下选择5天。

在onSelect方法的jquery-ui.multidatepicker.js中(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);
      });                             
}
在案例'daysRange'之前,在toogleDate方法(cca.431行)中的jquery-ui.multidatepicker.js中

case 'daysRangeWithoutWeekends':
在案例'daysRange'之前,在setMode(cca.473row)中的jquery-ui.multidatepicker.js中

添加:

case 'daysRangeWithoutWeekends':

calander是init:

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

如果有人制作通用算法,请分享=)

答案 1 :(得分:0)

你为什么不试试这个

methods.addDates.call(obj,all_new_dates);

而不是

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

使用以下代码更改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++;
}

答案 4 :(得分:0)

仅禁用星期日:在showSayDay之前添加选项:noWeekendsOrHolidays

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

如果您在控制台中有错误:错误:收到空日期数组。 在jquery-ui.multidatespicker.js中 寻找&#34; addDates:function(日期,类型)&#34;并添加return 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.');
            }
        },