如何从两个引导时间选择器字段获取持续时间

时间:2018-09-25 10:26:36

标签: javascript twitter-bootstrap timepicker

我正在使用 Bootstrap 3 制作表单,在其中添加了两个时间选择器。但是我的问题是如何从两个输入字段中获取持续时间值。

注意:我在second中得到结果,我使用parseInt()获得整数值。 我如何像130 = 2:10 HR那样获得他们

Fiddle

<div class="form-group">
<label class="control-label " for="textarea">Task Time & Durations</label>
    <div class="row">
        <div class="input-group col-md-4 bootstrap-timepicker timepicker">
            <input id="timepicker1" name="start-time" type="text" class="form-control input-small">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-time"></i>
            </span>
        </div>
        <div class="input-group col-md-4 bootstrap-timepicker timepicker">
            <input id="timepicker2" name="end-time" type="text" class="form-control input-small">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-time"></i>
            </span>
        </div>
        <div class="input-group col-md-4">
            <input id="duration" name="duration" type="text" class="form-control input-small" disabled>
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-time"></i>
            </span>
        </div>
    </div>
</div>

这是我的JS代码

$(document).ready(function(){
        $('#timepicker1,#timepicker2').timepicker({
            minuteStep: 1,
        });
        //-----------------------------------------------------------------
        $("#timepicker2").change(function(){                 
            //get value from parent form 
            var d3 = $("#timepicker1").val(); 
            var d4 = $("#timepicker2").val();       


            // calculate number of minutes for first field
            var d5 = d3.substring(0, 2);
            var d6 = d3.substring(3, 5);
            var d7 = ((parseInt(d5 )* 60) + (parseInt(d6) * 1));

            //calculate number of minutes for second field
            var d8 = d4.substring(0, 2);
            var d9 = d4.substring(3, 5);
            var d10 = ((parseInt(d8) * 60) + (parseInt(d9) * 1)) ;

            //final calculation (number of minutes)
            var d11= (d10 - d7) ;


            diff = d11; // ms per day

            //store the value to a field 
            $("#duration").val(diff);                                                            
        });    

        //-----------------------------------------------------------------
    });

1 个答案:

答案 0 :(得分:0)

我解决了这个问题,感谢您的帮助Working fiddle,希望对您有所帮助

$(document).ready(function(){
    $('#timepicker1,#timepicker2').timepicker({
        minuteStep: 1,
    });
    //-----------------------------------------------------------------
    $("#timepicker2").change(function(){                 
        //get value from parent form 
        var d3 = $("#timepicker1").val(); 
        var d4 = $("#timepicker2").val();       


        // calculate number of minutes for first field
        var d5 = d3.substring(0, 2);
        var d6 = d3.substring(3, 5);
        var d7 = ((parseInt(d5 )* 60) + (parseInt(d6) * 1));

        //calculate number of minutes for second field
        var d8 = d4.substring(0, 2);
        var d9 = d4.substring(3, 5);
        var d10 = ((parseInt(d8) * 60) + (parseInt(d9) * 1)) ;

        //final calculation (number of minutes)
        var d11= (d10 - d7) ;


        diff = d11; // ms per day

        if (diff == null) { return ""; }
        if (diff <= 0) { return ""; }
        var hours = Math.floor(diff / 60);
        var minutes = diff % 60;
        var hour = (hours > 1) ? hours + " hrs " : hours + " hr ";
        var min = (minutes > 0) ? minutes + " mins" : "";
        var duration= hour + min;

        //store the value to a field 
        $("#duration").val(duration);                                                            
    });    
});