从引导 daterangepicker 计算天数

Question

我正在使用引导 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>

我一直在参考引导 jquery daterangepicker 论坛和其他 Internet 资源以寻求解决方案，但很不幸。感谢有人可以提供帮助。

Answer 1

Moment.js 是您处理日期和时间的最佳朋友：

var a = moment($('#fromdate').val());
var b = moment($('#todate').val());
$('#numberdays').val(a.diff(b, 'days'));

Answer 2

你可以这样做：

$('input[name="fromdate"]').on('apply.daterangepicker', function(ev, picker) {
        if($('input[name="todate"]').val() != ''){
        var a = moment($('input[name="fromdate"]').val());
        var b = moment($('input[name="todate"]').val());
        $('#numberdays').val(b.diff(a, 'days'));
    }
});

 $('input[name="todate"]').on('apply.daterangepicker', function(ev, picker) {
        var a = moment($('input[name="fromdate"]').val());
        var b = moment($('input[name="todate"]').val());
        $('#numberdays').val(b.diff(a, 'days'));
});

Answer 3

看起来 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>

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

$(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，因为 bootstrap date ranger picker 不能很好地处理多个日期输入。

要使用 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 将不起作用。您可以考虑将其设置为readonly。