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

但它只是＆＃34;禁用＆＃34;所有星期天，我想删除/隐藏它们：

以下是我工作的小提琴：https://jsfiddle.net/maximelafarie/dnbd01do/11/

修改更新了@Swanand代码：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

您需要在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;}

请注意，我没有检查过所有场景，但它会为你做伎俩。

Answer 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个工作日自动应用。

如果句点适用于星期日（我们在此期间为X个星期日添加一个补充日期和X），结果如下：

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

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

Answer 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/

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

4 个答案: