jquery - 从 bootstrap daterangepicker 计算天数

Question

我正在使用 bootstrap jquery daterangepicker。我的目的是找到两个日期之间的天数。在我的 HTML 中，我使用了 2 个输入字段，如下所示

<div class="col-12 form-group has-feedback">
    <label>From <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" id="fromdate" 
        placeholder="MM/DD/YYYY" name="fromdate">
</div>
<div class="col-12 form-group has-feedback">
    <label>To <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" id="todate" 
        placeholder="MM/DD/YYYY" name="todate">
</div>

现在，当用户选择起始日期和截止日期时，我需要自动填充天数到以下输入值

<div class="col-12 form-group has-feedback">
    <label>Number of days <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" name="numberdays" 
        id="numberdays" disabled>
</div>

我一直在引用 bootstrap jquery daterangepicker 论坛和其他互联网资源来寻求解决方案，但不幸的是。如果有人可以提供帮助，我们将不胜感激。

Answer 1

它真的看起来像 bootstrap date range picker 仅适用于该范围的一个输入，而不是您在那里的输入 - 一个输入为起始日期，另一个输入为截止日期。

只需输入 1 个日期范围

如果您可以将日期范围的输入更改为仅一个输入

<div class="col-12 form-group has-feedback">
    <label>From <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" id="daterange" 
        name="daterange">
</div>

然后，在使用引导日期范围选择器初始化范围输入后，您可以非常轻松地计算日差:

$(function() {
    $('#daterange').daterangepicker();

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        // picker.startDate and picker.endDate are already Moment.js objects.
        // You can use diff() method to calculate the day difference.
        $('#numberdays').val(picker.endDate.diff(picker.startDate, "days"));
    });
});

演示: https://jsfiddle.net/davidliang2008/ec2L749p/10/

如果您必须输入开始和结束日期

我建议只使用 jquery datepicker 因为引导日期范围选择器不能很好地处理多个日期输入。

要使用jquery datepicker，请记住包含jquery以及jquery-ui(还有它的CSS)。

您可以通过以下方式将它们设为日期范围选择器:

$(function() {
    let $fromDate = $('#fromdate'),
        $toDate = $('#todate');

    $fromDate.datepicker().on('change', function(){
        $toDate.datepicker('option', 'minDate', $(this).val());
    });

    $toDate.datepicker().on('change', function(){
        $fromDate.datepicker('option', 'maxDate', $(this).val());
    });;
});

您需要做的最后一件事就是拥有一个函数来计算更改事件的日期差异:

$(function() {
    let $fromDate = $('#fromdate'),
        $toDate = $('#todate'),
        $numberDays = $('#numberdays');

    $fromDate.datepicker().on('change', function(){
        $toDate.datepicker('option', 'minDate', $(this).val());

        $numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
    });

    $toDate.datepicker().on('change', function(){
        $fromDate.datepicker('option', 'maxDate', $(this).val());

        $numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
    });

    function calculateDateDiff(endDate, startDate) {
        if (endDate && startDate) {
            let e = moment(endDate),
                s = moment(startDate);

            return e.diff(s, "days");
        }

        return null;
    }
});

演示: https://jsfiddle.net/davidliang2008/ec2L749p/20/

省略周末

我将使用 jquery datepicker 来使用演示，因为它支持通过设置 beforeShowDay 属性来禁用日期选择器上的周末:

$fromDate.datepicker({
    beforeShowDay: $.datepicker.noWeekends
}).on('change', function(){
    $toDate.datepicker('option', 'minDate', $(this).val());

    $numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
});

$toDate.datepicker({
    beforeShowDay: $.datepicker.noWeekends
}).on('change', function(){
    $fromDate.datepicker('option', 'maxDate', $(this).val());

    $numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
});

日期选择器上的所有周末均被禁用:

然后您需要更改函数 calculateDateDiff() 以在计算时忽略周末。这里我添加了第三个参数 noWeekends 来指示我们是否希望计算忽略周末:

function calculateDateDiff(endDate, startDate, noWeekends) {
    if (endDate && startDate) {
        let e = moment(endDate),
            s = moment(startDate);

        if (!noWeekends) {
            return e.diff(s, "days");
        }

        let count = 0;
        for(let m = s; m.isBefore(e); m.add(1, 'days')) {
            if (m.isoWeekday() !== 6 && m.isoWeekday() !== 7) {
                count++;
            }
        }

        return count;
    }

    return null;
}

演示: https://jsfiddle.net/davidliang2008/ec2L749p/32/

友情提醒

如果您打算将 numberdays 输入发送回服务器，将其设置为 disabled 将不起作用。您可以考虑将其设置为只读。