javascript - 时间差异给出无效日期

Question

我有一个场景，我想在从前两个文本框计算 InTime 和 OutTime 后显示员工的总时间。

这是场景，

在第一个文本框中用户将添加INTIME

在第二个文本框中 用户将添加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);
   }

但问题是，我在该文本框中收到错误

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

}