从 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>

现在我需要自动填充用户 select 开始日期和截止日期为以下输入值

的天数

<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

在处理日期和时间方面，

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 日期选择器，请记住包括 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 日期选择器 的演示，因为它支持通过设置 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/

友情提示

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

从 bootstrap daterangepicker 计算天数

Calculate number of days from bootstrap daterangepicker

html

jquery

bootstrap-modal

bootstrap-4

bootstrap-daterangepicker

日期范围只需 1 个输入

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

省略周末

友情提示