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

Question

我正在使用来自以下位置的 bootstrap-datetimepicker:

http://eonasdan.github.io/bootstrap-datetimepicker/

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

事实是，当我打开另一个小部件时，这段代码可以很好地与以下 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>

过去在小部件的 onClose 事件上运行良好的 javascript 部分是:

$('#timepicker4').datetimepicker({
    locale: 'pt-br',
    format: 'HH:mm'
});

$('#timepicker5').datetimepicker({
    locale: 'pt-br',
    format: 'HH:mm'
});

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

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

            // create date format
            var valuestart = new Date("01/01/2016 " + start).getTime();
            var valuestop = new Date("01/01/2016 " + stop).getTime();

            var diff = timeStop - timeStart;

            var minutesDiff = new Date(diff) / 60000; 

            $("#interval1").val(minutesDiff);
        });

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

我在这里缺少什么？

Answer 1

您需要使用dp.change而不是change事件。根据documentation您还可以使用以下其他事件。

1. dp.隐藏
2. dp.show
3. dp.change
4. dp.error
5. dp.update

我为一个日期时间选择器添加了事件处理程序，它似乎有效。为了正确反射(reflect)间隔，您还需要为 datetimepicker2 添加 dp.change 事件处理程序 - 以便在 datetimepicker2 中选择新日期时间隔也会更改。

HTML:

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

Javascript部分:

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

});