Eu tenho um formulário contendo dois campos input type = "time". Eu tenho um terceiro tipo de entrada = campo "tempo" chamado 'atraso' no formulário que eu gostaria de usar o jQuery para atualizar com base na diferença entre os dois tempos.

Eu procurei por uma resposta, mas até agora não consegui encontrar uma solução que funcionasse. Como os campos input type = "time" contêm apenas horas / minutos, tentei algo assim:

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

Entretanto, isso não funciona. Eu recebo respostas NaN quando uso isso. Eu tenho esse código deoutra pergunta do Stackoverflow e a pessoa que fez a pergunta também recebeu o mesmo problema do NaN, mas encontrou uma solução para o problema sem postar o que era.

Eu também tentei isso:

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

Isso definitivamente é o mais próximo de funcionar, mas às vezes dá alguns resultados estranhos. Por exemplo, se timeOfCall é 01:01 e timeOfResponse é 03:03, isso dá uma diferença de 2.033333 ....

Em ambos os casos, também não consigo obter o campo de tempo de 'atraso' para atualizar em ambos os casos.

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

Simplesmente não faz nada. Eu realmente aprecio toda e qualquer ajuda com isso, eu tenho trabalhado nisso nos últimos dias sem sucesso e sem nenhuma pista real sobre como consertá-lo. Eu tenho feito muito Googling, mas muito poucos resultados parecem pertencer a campos de entrada HTML5 type = "time", então eu não tive sorte até agora.

Editar: jsFiddle