Javascript-如何使用引导datetimepicker自动计算两个时间输入之间的差异？

我正在从以下位置使用引导datetimepicker：

主要是因为在我的应用程序中，我需要一个小部件来显示时间。其他datepicker小部件大多只处理日期，我需要一个标准化的小部件

问题是，当我打开另一个小部件时，这段代码与以下Javascript配合得很好，除了：

<div class="col-lg-5 col-sm-5 col-xs-10">
    <div class="well with-header">
        <div class="header">
            <label th:for="timepicker4" th:value="${hourIntervalStart}" th:text="#{scheduler.intervalStartTime}">Hour Interval Start: </label>
        </div>
        <div>
            <div class="input-group">                                                   
                <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                <input name="hourIntervalStart" th:value="${hourIntervalStart}" th:field="*{hourIntervalStart}" id="timepicker4" class="form-control tp_interval1"></input> 
            </div>
        </div>
    </div>
</div>
<div class="col-lg-2 col-sm-2 col-xs-4">
    <div class="well with-header">
        <div class="header">
            <label th:for="interval1" th:value="${increment}" th:text="#{scheduler.increment}">Interval (minutes): </label>
        </div>
        <div>
            <div class="input-group">
                <input name="increment" type="text" th:field="*{increment}" id="interval1" class="form-control" ></input>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-10">
    <div class="well with-header">
        <div class="header">
            <label th:for="timepicker5" th:text="#{scheduler.intervalEndTime}">Hour Interval End:</label>
        </div>
        <div>
            <div class="input-group">
                <input name="hourIntervalEnd" id="timepicker5" type="datetime" th:value="${hourIntervalEnd}" th:field="*{hourIntervalEnd}" class="form-control tp_interval1" ></input>
                <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

我想要的是，以分钟为单位的时差自动显示在“#interval1”输入中

---

我在这里遗漏了什么？

最后，我做了以下几点：

$(".tp_interval1").on("dp.change", function (e){
    // get values
    var valuestart = $('#timepicker4').val();
    var valuestop = $('#timepicker5').val();

    var start = moment(valuestart, 'HH:mm');
    var stop = moment(valuestop, 'HH:mm');

    var diff = moment(stop, "HH:mm") - moment(start, "HH:mm");

    $("#interval1").val(diff / 60000);
});

---

您需要使用

dp.change

而不是

change

事件。根据，您还可以使用以下其他事件

dp.隐藏

dp.show

dp.变化

dp.错误

dp.1更新

我为一个datetimepicker添加了事件处理程序，它似乎可以工作。为了正确反映时间间隔，还需要为datetimepicker2添加

dp.change

事件处理程序，以便在datetimepicker2中选择新日期时，时间间隔也会更改

HTML:

---

}))

使用

$（“#datetimepicker4”）。在（“dp.change”，function（e）{}

。在感谢中看到我的答案，伙计，但它没有按预期工作。事件是否正确触发？我的意思是听

dp.change

而不是只听

change

。而不是

$（'.tp\u interval1'）。change（function（）{}）

你可以使用

$(“#timepicker4”）。在（“dp.change”上，函数（e）{}

。您也可以使用

e.date

获取日期值。用一个示例编写了一个答案。没有看到您已经回答了。总之……随它去吧。

$(".tp_interval1").on("dp.change", function (e){
    // get values
    var valuestart = $('#timepicker4').val();
    var valuestop = $('#timepicker5').val();

    var start = moment(valuestart, 'HH:mm');
    var stop = moment(valuestop, 'HH:mm');

    var diff = moment(stop, "HH:mm") - moment(start, "HH:mm");

    $("#interval1").val(diff / 60000);
});

<div class="container">
<div class="row">
    <div class='col-sm-4'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
<div class='col-sm-4'>
        <input type='text' id="interval" value=''/>
    </div>
<div class='col-sm-4'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'MM/DD/YYYY HH:mm'
   });
   $('#datetimepicker2').datetimepicker({
        format: 'MM/DD/YYYY HH:mm'
   });

   $('#datetimepicker1').on('dp.change', function (e) {
        //here you can use e.date to get the date selected in the current datepicker
        var ms = e.date.diff($('#datetimepicker2').data('DateTimePicker').date());
        var d = moment.duration(ms);
        var s = Math.floor(d.asHours());
        $('#interval').val(s);
   });