如何计算2种HTML5时间输入类型之间的差异 [英] How to calculate the difference between 2 HTML5 time input types

问题描述

我有一个包含两个输入type ="time"字段的表单.我在表单上有一个名为'delay'的第三个输入type ="time"字段，我想使用jQuery根据两次之间的差异进行更新.

I have a form containing two input type="time" fields. I have a third input type="time" field called 'delay' on the form that I would like to use jQuery to update based on the difference between the two times.

我一直在寻找答案，但到目前为止还无法提出有效的解决方案.由于输入的type ="time"字段仅包含小时/分钟，因此我尝试了以下操作:

I have searched for an answer but so far have not been able to come up with a solution that works. Since the input type="time" fields only contain hours/minutes I've tried something like this:

<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">

var timeOfCall = $('#timeOfCall').val();
var timeOfResponse = $('#timeOfResponse').val();
var diff = new Date("Aug 08 2012" + timeOfCall) - new Date("Aug 08 2012" + timeOfResponse);
var timeDifference = diff/(60*60*1000);

但是，这不起作用.使用此方法时，我会收到NaN响应.我从另一个Stackoverflow问题和问了一个问题，那里也有同样的NaN问题，但无助地找到了问题的解决方案，而没有发布它的内容.

However this does not work. I get NaN responses when I use this. I got this code from another Stackoverflow question and the person who asked the question there also got the same NaN issue, but unhelpfully found a solution to the problem without posting what it was.

我也尝试过:

var timeDifference = new Date("1970-1-1 " + timeOfCall) - new Date("1970-1-1 " +  timeOfResponse) ) / 1000 / 60 / 60;

这肯定是最接近工作的，但有时会给出一些奇怪的结果.例如，如果timeOfCall为01:01，timeOfResponse为03:03，则相差2.033333....

This definitely comes the closest to working but it gives some odd results sometimes. For instance, if timeOfCall is 01:01 and timeOfResponse is 03:03 it gives a difference of 2.033333....

无论哪种情况，在任何一种情况下，我都无法获取延迟"时间字段进行更新.

In either case I also cannot get the 'delay' time field to update in either case.

$('#delay').val(timeDifference);

完全不执行任何操作.我非常感谢您提供的所有协助，过去几天来我一直在努力，但没有成功，也没有真正的线索来解决它.我已经做了很多谷歌搜索，但是实际上几乎没有结果与HTML5输入type ="time"字段有关，所以到目前为止我还没有运气.

Simply does nothing. I would really appreciate any and all assistance with this, I have been going at it for the past few days with no success and no real clue how to go about fixing it. I've been doing a lot of Googling but very few results actually seem to pertain to HTML5 input type="time" fields so I've had no luck so far.

jsFiddle

推荐答案

可能就是这样:

演示

$('button').on('click', function () {
    var timeOfCall = $('#timeOfCall').val(),
        timeOfResponse = $('#timeOfResponse').val(),
        hours = timeOfResponse.split(':')[0] - timeOfCall.split(':')[0],
        minutes = timeOfResponse.split(':')[1] - timeOfCall.split(':')[1];

    minutes = minutes.toString().length<2?'0'+minutes:minutes;
    if(minutes<0){ 
        hours--;
        minutes = 60 + minutes;
    }
    hours = hours.toString().length<2?'0'+hours:hours;
    $('#delay').val(hours + ':' + minutes);
});

这篇关于如何计算2种HTML5时间输入类型之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！