I am facing a situation where I need to display the total time worked by an employee after calculating the InTime and OutTime from the first two input fields.
Here's how it works:
The first input field is for the user to enter the INTIME
The second input field is for the user to enter the OUTTIME.
Once both values are added, the third input field will show the total hours the employee has been working.
This is what I have attempted so far:
HTML
<tr>
<td>
<asp:Label ID="lblInTime" runat="server" Text="In Time" Visible="true"></asp:Label>
<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>
<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>
<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);
}
However, I encountered an error in the third input field stating:
Invalid Date.
Note: My date format is HH:MM and uses the 24-hour clock
Please advise me on where I might be making a mistake