忽略 jQuery 日期范围选择器中的星期日

Question

我正在使用以下 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];
}

但它只 "disables" 整个星期天，而我想删除/隐藏它们：

这是我正在处理的fiddle：https://jsfiddle.net/maximelafarie/dnbd01do/11/

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

Answer 1

你可以只用一点点 CSS 但它确实留下了一个空白：

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

希望对您有所帮助。

Answer 2

您也可以通过设置自定义 css class 并在 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];
    }

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

这是一个有效的 fiddle

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

Answer 3

您需要对 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('');
}

在这个函数中，我在推送元素时添加了 class 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>';
        }
    }

在此文件中，我已将 class 添加到第 7 周 header。

CSS:

.hideSunday{display:none;}

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

Answer 4

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

这些问题启发了我：

Moment.js: Date between dates

所以我创建了一个函数，如下所示，它 returns 一个数组，其中包含您选择的日期范围内的 "sundays"（或您作为 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 个工作日自动应用。

如果期间适用于星期日（我们添加一个补充日和 X期间的 X 个星期日，结果如下：

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

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

忽略 jQuery 日期范围选择器中的星期日

Ignore Sundays from jQuery date range picker

javascript

jquery

datepicker

daterangepicker