从 jQuery 日期范围选择器中忽略星期日答案

【问题标题】：Ignore Sundays from jQuery date range picker从 jQuery 日期范围选择器中忽略星期日
【发布时间】：2017-12-08 10:52:36
【问题描述】：

我正在使用以下 jQuery 日期范围选择器库：http://longbill.github.io/jquery-date-range-picker/

我想从所有日期范围选择器中删除/隐藏所有星期日，同时保持日期范围选择器的正常行为。

我试图用beforeShowDay 选项做一些事情：

beforeShowDay: function(t) {
  var valid = t.getDay() !== 0; //disable sunday
  var _class = '';
  // var _tooltip = valid ? '' : 'weekends are disabled';
  return [valid, _class];
}

但它只会“禁用”所有星期日，而我想删除/隐藏它们：

这是我正在制作的小提琴：https://jsfiddle.net/maximelafarie/dnbd01do/11/

编辑： 更新了@Swanand 代码：https://jsfiddle.net/maximelafarie/dnbd01do/18/

【问题讨论】：

stackoverflow.com/questions/4376987/… 如果语法相同
@mplungjan 不，这不是我想要的。您提到的问题仅要求禁用星期日，我想完全删除它们（用户在任何日期范围选择器中都看不到它们）:)
您还可以在 beforeshowday 中添加自定义 css 以隐藏即将到来的星期日

标签： javascript jquery datepicker daterangepicker

【解决方案1】：

你可以只用一点 CSS 来做到这一点，但它确实会留下一个空白：

.week-name th:nth-child(7),
.month1 tbody tr td:nth-child(7) {
    display: none;
}

希望这会有所帮助。

【讨论】：

真的不错@SWC，谢谢！但是图书馆总是在日期范围内选择星期天。例如，在第一个日期范围选择器中选择 4 天，然后在第二个中单击星期五或星期六，您会看到它总是计算星期天
谢谢。如果它与您上面的代码相结合，从选择中禁用星期日，这是否也适用？
是的！ ;-)

【解决方案2】：

您需要更改 daterangepicker.js 文件中的两个函数：

createMonthHTML()

    function createMonthHTML(d) { var days = [];
    d.setDate(1);
    var lastMonth = new Date(d.getTime() - 86400000);
    var now = new Date();
    var dayOfWeek = d.getDay();
    if ((dayOfWeek === 0) && (opt.startOfWeek === 'monday')) {
        // add one week
        dayOfWeek = 7;
    }
    var today, valid;

    if (dayOfWeek > 0) {
        for (var i = dayOfWeek; i > 0; i--) {
            var day = new Date(d.getTime() - 86400000 * i);
            valid = isValidTime(day.getTime());
            if (opt.startDate && compare_day(day, opt.startDate) < 0) valid = false;
            if (opt.endDate && compare_day(day, opt.endDate) > 0) valid = false;
            days.push({
                date: day,
                type: 'lastMonth',
                day: day.getDate(),
                time: day.getTime(),
                valid: valid
            });
        }
    }
    var toMonth = d.getMonth();
    for (var i = 0; i < 40; i++) {
        today = moment(d).add(i, 'days').toDate();
        valid = isValidTime(today.getTime());
        if (opt.startDate && compare_day(today, opt.startDate) < 0) valid = false;
        if (opt.endDate && compare_day(today, opt.endDate) > 0) valid = false;
        days.push({
            date: today,
            type: today.getMonth() == toMonth ? 'toMonth' : 'nextMonth',
            day: today.getDate(),
            time: today.getTime(),
            valid: valid
        });
    }
    var html = [];
    for (var week = 0; week < 6; week++) {
        if (days[week * 7].type == 'nextMonth') break;
        html.push('<tr>');

        for (var day = 0; day < 7; day++) {
            var _day = (opt.startOfWeek == 'monday') ? day + 1 : day;
            today = days[week * 7 + _day];
            var highlightToday = moment(today.time).format('L') == moment(now).format('L');
            today.extraClass = '';
            today.tooltip = '';
            if (today.valid && opt.beforeShowDay && typeof opt.beforeShowDay == 'function') {
                var _r = opt.beforeShowDay(moment(today.time).toDate());
                today.valid = _r[0];
                today.extraClass = _r[1] || '';
                today.tooltip = _r[2] || '';
                if (today.tooltip !== '') today.extraClass += ' has-tooltip ';
            }

            var todayDivAttr = {
                time: today.time,
                'data-tooltip': today.tooltip,
                'class': 'day ' + today.type + ' ' + today.extraClass + ' ' + (today.valid ? 'valid' : 'invalid') + ' ' + (highlightToday ? 'real-today' : '')
            };

            if (day === 0 && opt.showWeekNumbers) {
                html.push('<td><div class="week-number" data-start-time="' + today.time + '">' + opt.getWeekNumber(today.date) + '</div></td>');
            }
            if(day == 0){
                html.push('<td class="hideSunday"' + attributesCallbacks({}, opt.dayTdAttrs, today) + '><div ' + attributesCallbacks(todayDivAttr, opt.dayDivAttrs, today) + '>' + showDayHTML(today.time, today.day) + '</div></td>');
            }else{
                html.push('<td ' + attributesCallbacks({}, opt.dayTdAttrs, today) + '><div ' + attributesCallbacks(todayDivAttr, opt.dayDivAttrs, today) + '>' + showDayHTML(today.time, today.day) + '</div></td>');
            }

        }
        html.push('</tr>');
    }
    return html.join('');
}

在这个函数中，我在推送元素时添加了类hideSunday。

第二个函数是getWeekHead()：

function getWeekHead() {
        var prepend = opt.showWeekNumbers ? '<th>' + translate('week-number') + '</th>' : '';
        if (opt.startOfWeek == 'monday') {
            return prepend + '<th>' + translate('week-1') + '</th>' +
                '<th>' + translate('week-2') + '</th>' +
                '<th>' + translate('week-3') + '</th>' +
                '<th>' + translate('week-4') + '</th>' +
                '<th>' + translate('week-5') + '</th>' +
                '<th>' + translate('week-6') + '</th>' +
                '<th class="hideSunday">' + translate('week-7') + '</th>';
        } else {
            return prepend + '<th class="hideSunday">' + translate('week-7') + '</th>' +
                '<th>' + translate('week-1') + '</th>' +
                '<th>' + translate('week-2') + '</th>' +
                '<th>' + translate('week-3') + '</th>' +
                '<th>' + translate('week-4') + '</th>' +
                '<th>' + translate('week-5') + '</th>' +
                '<th>' + translate('week-6') + '</th>';
        }
    }

在这个文件中，我在第 7 周的标题中添加了类。

CSS：

.hideSunday{display:none;}

请注意，我没有检查所有场景，但它会为你解决问题。

【讨论】：

这也是一个不错的解决方案@Swaland！但问题是，当您在第一个日期范围选择器中选择 4 天的日期范围并在第二个日期范围选择器中单击星期五或星期六时，似乎仍然选择了星期日：/ 设置日期范围可能会很好如果日期范围超过（或结束）星期天，选择器再选择一天；）

【解决方案3】：

我最终让星期日出现（但完全禁用了它们）。

这些问题启发了我：

所以我创建了一个如下函数，它返回一个数组，其中包含您选择的日期范围内的“星期日”（或您提供的任何日期作为dayNumber 参数）：

function getDayInRange(dayNumber, startDate, endDate, inclusiveNextDay) {
  var start = moment(startDate),
    end = moment(endDate),
    arr = [];

  // Get "next" given day where 1 is monday and 7 is sunday
  let tmp = start.clone().day(dayNumber);
  if (!!inclusiveNextDay && tmp.isAfter(start, 'd')) {
    arr.push(tmp.format('YYYY-MM-DD'));
  }

  while (tmp.isBefore(end)) {
    tmp.add(7, 'days');
    arr.push(tmp.format('YYYY-MM-DD'));
  }

  // If last day matches the given dayNumber, add it.
  if (end.isoWeekday() === dayNumber) {
    arr.push(end.format('YYYY-MM-DD'));
  }

  return arr;
}

然后我在我的代码中这样调用这个函数：

$('#daterange-2')
  .dateRangePicker(configObject2)
  .bind('datepicker-change', function(event, obj) {

    var sundays = getDayInRange(7, moment(obj.date1), moment(obj.date1).add(selectedDatesCount, 'd'));
    console.log(sundays);

    $('#daterange-2')
      .data('dateRangePicker')
      .setDateRange(obj.value, moment(obj.date1)
        .add(selectedDatesCount + sundays.length, 'd')
        .format('YYYY-MM-DD'), true);
  });

这样，我检索了所选日期范围内的星期日数量。例如，如果我的选择中有两个星期天（sundays.length），我知道我必须为用户选择设置两个额外的工作日（在第二个日期范围选择器中）。

这是工作结果：

通过上面的截图，您可以看到用户选择了 4 个工作日（5 个工作日，但我们不计算在内）。然后他点击第二个日历，自动应用 4 个工作日。

如果周期适用于星期日，则结果如下（我们在周期中添加一个补充日和 Xfor X sundays）：

最后，这是工作小提琴：https://jsfiddle.net/maximelafarie/dnbd01do/21/

我要感谢任何帮助过我的人。这个问题很难解释和理解。

【讨论】：

【解决方案4】：

您也可以通过设置自定义 css 类并在beforeShowDay 中使用它，如下所示

.hideSunDay{
   display:none;
  }

   beforeShowDay: function(t) {
      var valid = t.getDay() !== 0; //disable sunday
      var _class = t.getDay() !== 0 ? '' : 'hideSunDay';   
      // var _tooltip = valid ? '' : 'weekends are disabled';
      return [valid, _class];
    }

但它只隐藏从当天开始的星期日。

这是一个有效的小提琴

https://jsfiddle.net/dnbd01do/16/

【讨论】：