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

前端之家收集整理的这篇文章主要介绍了jquery ui多日期选择器数据范围没有周末前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用这个 multidate picker.是否可以使用日期范围模式,不选择周末?

我已经完成了multidatepicker周末被阻止,用户只能选择5天,但这不是我的目标.我想要这个功能:当用户点击特定日期时,范围内的五天将突出显示而无需周末…

我的代码如下:

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

现在我非常接近我自己的解决方案:

我计算所有必须启用的日子和所有新的日子,如果周末有天数,则必须选择.

我在multidatepicker.js daysRangeWithoutWeekends中添加我的新方法,我计算所有新的和禁用的日期.然后我使用两个foreach循环,我禁用并启用新日期:

  1. $.each(all_removed_dates,function(index,value) {
  2. methods.removeDates.call(obj,value);
  3. });
  4.  
  5. $.each(all_new_dates,value) {
  6. methods.addDates.call(obj,value);
  7. });

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

  1. 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天.

在onSelect方法的jquery-ui.multidatepicker.js中(cca.81行)添加

  1. if(this.multiDatesPicker.mode == 'daysRangeWithoutWeekends' && this.multiDatesPicker.dates.picked.length > 0){
  2. var i = 0,last
  3.  
  4. if(this.multiDatesPicker.dates.picked[0].getDay() == 2){ //thusday
  5. i = 1
  6. //remove sunday
  7. all_removed_dates.push(this.multiDatesPicker.dates.picked[4])
  8. }
  9. if(this.multiDatesPicker.dates.picked[0].getDay() == 3){//wednesday
  10. i = 2
  11. //remove sunday and saturday
  12. all_removed_dates.push(this.multiDatesPicker.dates.picked[3],this.multiDatesPicker.dates.picked[4])
  13. }
  14. if(this.multiDatesPicker.dates.picked[0].getDay() == 4){ //thursday
  15. i=2
  16. all_removed_dates.push(this.multiDatesPicker.dates.picked[2],this.multiDatesPicker.dates.picked[3])
  17. }
  18. if(this.multiDatesPicker.dates.picked[0].getDay() == 5){ //friday
  19. i=2
  20. all_removed_dates.push(this.multiDatesPicker.dates.picked[1],this.multiDatesPicker.dates.picked[2])
  21. }
  22.  
  23. last = this.multiDatesPicker.dates.picked.pop()
  24. this.multiDatesPicker.dates.picked.push(last)
  25.  
  26. if(this.multiDatesPicker.dates.picked[0].getDay() == 2){ //thusday
  27. //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
  28. var new_date = new Date(last.getFullYear(),last.getMonth(),last.getDate() + 2)
  29. all_new_dates.push(new_date)
  30. }else{
  31. //if there were sunday and saturday in range we add 2 days to last date in range
  32. for(var j = 1; j <= i; j++){
  33. var new_date = new Date(last.getFullYear(),last.getDate() + j)
  34. all_new_dates.push(new_date)
  35. }
  36. }
  37.  
  38. var obj = this
  39. //remove sunday and saturday
  40. $.each(all_removed_dates,value) {
  41. methods.removeDates.call(obj,value);
  42. });
  43. //add new days
  44. $.each(all_new_dates,value) {
  45. methods.add_new_date.call(obj,value);
  46. });
  47. }

在’daysRange’添加之前,在toogleDate方法(cca.431行)中的jquery-ui.multidatepicker.js中:

  1. case 'daysRangeWithoutWeekends':

在案例’daysRange’之前的setMode(cca.473row)中的jquery-ui.multidatepicker.js中添加

  1. case 'daysRangeWithoutWeekends':

calander是init:

  1. jQuery('#deliverydate').multiDatesPicker({
  2. minDate:0,numberOfMonths: 2
  3. });

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

猜你在找的jQuery相关文章