Difference in time is giving Invalid date

Question

I have a scenario, where I want to show the total time of employee after calculating the InTime and OutTime from the first two textboxes.

Here Is the scenario,

In first textbox User will add INTIME

In Second textbox User will add OUTTIME.

As soon as both the values are entered, the third textbox will show the total time the employee has worked.

Here is what I tried.

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

But the issue is that, I am getting error in thid textbox as

Invalid Date.

Note My date format is HH:MM and in 24 hrs format

Kindly suggest where I am mistaken

Answer 1

To subtract start from end, you have to convert both of them to dates first.

Change your JavaScript function:

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

}