如何计算两个引导日期选择器之间的差异？答案

【问题标题】：How to calculate difference of between two bootstrap datepicker?如何计算两个引导日期选择器之间的差异？
【发布时间】：2016-11-18 17:36:41
【问题描述】：

您好，我有两个引导日期选择器，我想计算日期之间的差异并在输入框中显示天数。代码：-

<input class="form-control datepicker" type="text" id="fdate" name="fdate">
<input class="form-control datepicker" type="text" id="tdate" name="tdate">
<input class="form-control" type="text" name="days" id="days">

JavaScript:-

<script>
$(function() {

$('#fdate').datepicker({
    format: "dd-M-yy",
    todayHighlight:'TRUE',
    autoclose: true,
    minDate: 0,
    maxDate: '+1Y+6M',
    onSelect: function (dateStr) {
        var min = $(this).datepicker('getDate'); 
        $("#tdate").datepicker('option', 'minDate', min || '0');
    }
}); 

$('#tdate').datepicker({
    format: "dd-M-yy",
    todayHighlight:'TRUE',
    autoclose: true,
    minDate: '0',
    maxDate: '+1Y+6M',
    onSelect: function (dateStr) {
        var max = $(this).datepicker('getDate'); 
        $('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M');
        var start = $("#fdate").datepicker("getDate");
        var end = $("#tdate").datepicker("getDate");
        var days = (end - start) / (1000 * 60 * 60 * 24);
        $("#days").val(days);
    }
}); 
});
</script>

我已尝试使用上述 javascript 来执行此操作，但它不起作用。我不确定这是否正确。请帮助我指出出了什么问题，或者是否有更好的方法。非常感谢任何帮助。

【问题讨论】：

添加一些 jsfiddle 以获得更好更快的响应

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

您应该使用日期选择器的 onchange 事件。根据下面的代码更改代码以获取不同的日期，如下所示

$(function() {

$('#fdate').datepicker({
    format: "dd-M-yy",
    todayHighlight:'TRUE',
    autoclose: true,
    minDate: 0,
    maxDate: '+1Y+6M'
}).on('changeDate', function (ev) {
        $('#tdate').datepicker('setStartDate', $("#fdate").val());
});
$('#tdate').datepicker({
    format: "dd-M-yy",
    todayHighlight:'TRUE',
    autoclose: true,
    minDate: '0',
    maxDate: '+1Y+6M'
}).on('changeDate', function (ev) {
        var start = $("#fdate").val();
        var startD = new Date(start);
        var end = $("#tdate").val();
        var endD = new Date(end);
        var diff = parseInt((endD.getTime()-startD.getTime())/(24*3600*1000));
        $("#days").val(diff);
});

});

工作示例：https://plnkr.co/edit/D7gZnJBa3q6MiyCriT1U?p=preview

【讨论】：

感谢您提供的解决方案。我有另一个查询是否可以从第一个日期选择器的下一个日期开始第二个日期选择器中的日期。
是的，我已经更新了同样的插件

【解决方案2】：

HTML

<input name="startdate" readonly="" placeholder="Start date" id="startDatepicker" type="text">
<input name="enddate" readonly="" placeholder="End date" id="endDatepicker" type="text">

jQuery

$("#startDatepicker").datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '<i class="fa fa-chevron-left"></i>',
        nextText: '<i class="fa fa-chevron-right"></i>',
        changeMonth: true,
        changeYear: true,
        onClose: function (selectedDate) {
            $("#endDatepicker").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#endDatepicker").datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '<i class="fa fa-chevron-left"></i>',
        nextText: '<i class="fa fa-chevron-right"></i>',
        changeMonth: true,
        changeYear: true,
        onClose: function (selectedDate) {
            $("#startDatepicker").datepicker("option", "maxDate", selectedDate);
        }
    });

【讨论】：