Разница во времени дает неверную дату

Question

У меня есть сценарий, где я хочу показать общее время сотрудника после вычисления InTime и OutTime из первых двух текстовых полей.

Вот сценарий,

In first textbox Пользователь добавит INTIME

In Second textbox добавит OUTTIME пользователя.

Как только оба значения введены, третье текстовое поле покажет общее время работы сотрудника.

Вот что я пробовал.

HTML

<tr> 
      <td> 
       <asp:Label ID="lblInTime" runat="server" Text="In Time" Visible="true"></asp:Label>&nbsp; 
       <asp:TextBox ID="txtInTime" runat="server" Width="89px"></asp:TextBox> (HH:MM) 
       <asp:RegularExpressionValidator ID="regIntime" runat="server" ControlToValidate="txtInTime" 
        ErrorMessage="Please enter time in correct format" ValidationExpression="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"></asp:RegularExpressionValidator> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <asp:Label ID="lblOutTime" runat="server" Text="Out Time" Visible="true"></asp:Label>&nbsp; 
       <asp:TextBox ID="txtOutTime" runat="server" onkeyup="sum();" Width="89"> 
       </asp:TextBox> (HH:MM) 
       <asp:RegularExpressionValidator ID="regOuttime" runat="server" ControlToValidate="txtOutTime" 
        ErrorMessage="Please enter time in correct format" ValidationExpression="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"></asp:RegularExpressionValidator> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <asp:Label ID="lblTotalHr" runat="server" Text="Total Hours" Visible="true"></asp:Label>&nbsp; 
       <asp:TextBox ID="txtTotalHrs" runat="server" Width="70" ReadOnly="true" onkeyUp="TimeCalculation();"> 
       </asp:TextBox> 
      </td> 
     </tr> 

JAVASCRIPT

function TimeCalculation() { 
     var start = $('#txtInTime').val(); 
     var end = $('#txtOutTime').val(); 
     var diff = new Date(end - start); 
     $('#txtTotalHrs').val(diff); 
    } 

Но проблема в том, что, я получаю сообщение об ошибке в thid текстовое поле, как

Invalid Date.

Примечание Мой формат даты HH: MM и в формате 24 часа

Просьба предложить, где я ошибаюсь

Answer 1

Вычесть начать с конца, вы должны преобразовать их обоих к датам первый.

Изменить ваша функция JavaScript:

function TimeCalculation() 
    var start = $('#txtInTime').val(); 
    var startHours = parseInt(start.split(":")[0]); 
    var startMins = parseInt(start.split(":")[1]); 

    var end = $('#txtOutTime').val(); 
    var endHours = parseInt(end.split(":")[0]); 
    var endMins = parseInt(end.split(":")[1]); 

    var diffHours = endHours - startHours; 
    var diffMins = endMins - startMins; 
    diffHours = ("0" + diffHours).slice(-2); 
    diffMins = ("0" + diffMins).slice(-2); 
    var diff = diffHours + ":" + diffMins; 
    $('#txtTotalHrs').val(diff); 

}