Jquery 从引导daterangepicker计算天数

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

从* 到* 现在，我需要自动填充天数，当用户选择从日期和截止日期到下面的输入值

天数* 我一直在参考bootstrap jquery daterangepicker论坛和其他互联网资源来寻找解决方案，但不幸的是。感谢任何人的帮助。

在处理日期和时间方面是你最好的朋友：

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

您可以执行以下操作：

$('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'));
});

它看起来只需要一个范围的输入就可以很好地工作，而不是您在那里的输入—一个“开始日期”的输入和另一个“结束日期”的输入

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

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

$function{ $'daterange'.daterangepicker； $'daterange'。在'apply.daterangepicker'上，函数EV，picker{ //picker.startDate和picker.endDate已经是Moment.js对象。 //您可以使用diff方法来计算日差。 $'numberdays'.valpicker.endDate.diffpicker.startDate，天； }; }; 演示：

如果必须输入开始和结束日期 我建议只使用它，因为引导日期范围选择器不能很好地处理多个日期输入

要使用jQueryDatePicker，请记住包括jquery和jQueryUI以及它的css

您可以通过以下方式将其设置为日期范围选择器：

$function{ 设$fromDate=$'fromDate'， $toDate=$'toDate'； $fromDate.datepicker.on'change'，函数{ $toDate.datepicker'option'，'minDate'，$this.val； }; $toDate.datepicker.on'change'，函数{ $fromDate.datepicker'option'，'maxDate'，$this.val； };; }; 您需要做的最后一件事就是使用一个函数来计算更改事件的日期差异：

$function{ 设$fromDate=$'fromDate'， $toDate=$'toDate'， $numberDays=$'numberDays'； $fromDate.datepicker.on'change'，函数{ $toDate.datepicker'option'，'minDate'，$this.val； $numberDays.valcalculatedIff$toDate.val，$this.val； }; $toDate.datepicker.on'change'，函数{ $fromDate.datepicker'option'，'maxDate'，$this.val； $numberDays.valcalculatedIff$this.val、$fromDate.val； }; 函数CalculatedIffendDate，startDate{ 如果结束日期和开始日期{ 设e=momentedate， s=动量开始日期； 返回e.diff，天； } 返回null； } }; 演示：

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

$fromDate.datepicker{ beforeShowDay:$.datepicker.noWeekends }.关于“变化”，函数{ $toDate.datepicker'option'，'minDate'，$this.val； $numberDays.valcalculatedIff$toDate.val，$this.val； }; $toDate.datepicker{ beforeShowDay:$.datepicker.noWeekends }.关于“变化”，函数{ $fromDate.datepicker'option'，'maxDate'，$this.val； $numberDays.valcalculatedIff$this.val、$fromDate.val； }; 禁用日期选择器上的所有周末：

然后，您需要更改函数CalculatedEdiff，以便在进行计算时忽略周末。在这里，我添加了第三个参数noWeekends，以指示我们是否希望计算忽略周末：

函数CalculatedDiffendDate、startDate、noWeekends{ 如果结束日期和开始日期{ 设e=momentedate， s=动量开始日期； 如果！现在{ 返回e.diff，天； } 让计数=0； 因为m=s；m.isbefore；m.add1，“天”{ 如果m.isoWeekday！==6&&m.isoWeekday！==7{ 计数++； } } 返回计数； } 返回null； } 演示：

友好提醒

---

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

工作非常糟糕。非常感谢，感谢你的建议。我想补充一个问题。如何从计数中省略假日？你的意思是如何从计数中省略周末？是的。我需要略去周末谢谢你。但是如何处理jquery呢daterangepicker@theveil：计算差异的函数应相同。只是据我所知，daterangepicker没有让你禁用周末的选项。