Question

我正在使用bootstrap-datetimepicker：

http://eonasdan.github.io/bootstrap-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>

以前在窗口小部件的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事件。根据{{3}}，您也可以使用以下其他活动。

dp.hide
dp.show
dp.change
dp.error
dp.update

我添加了一个datetimepicker的事件处理程序，它似乎工作。要正确反映间隔，您还需要为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);
   });

}）;

Answer 2

最后，我做到了这一点：

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

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

2 个答案: