输入“IN TIME”和“OUT TIME”，格式为HH:MM

Question

我想要一个功能，用户可以在文本框中输入以下格式的时间

InTime : hh:mm // In time of the employee 1st textbox

OutTime: hh:mm // Out Time of the employee 2nd textbox

第三个文本框

员工的总时间:这里Total将来自两个文本框。

下面是我的HTML相同。请帮助

<tr>
            <td>
                <asp:Label ID="lblInTime" runat="server" Text="In Time" Visible="true"></asp:Label>&nbsp;
                <asp:TextBox ID="txtInTime" runat="server" Width="50">
                </asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblOutTime" runat="server" Text="Out Time" Visible="true"></asp:Label>&nbsp;
                <asp:TextBox ID="txtOutTime" runat="server" Width="50">
                </asp:TextBox>
            </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">
                </asp:TextBox>
            </td>
        </tr>

Answer 1

您可以使用TextMode="Time"作为用户输入的时间

<asp:TextBox ID="txtInTime" runat="server" Width="50" TextMode="Time"></asp:TextBox>

注意

TextMode属性在asp.net 4.5及以上版本中可用，这将仅被最新的浏览器识别，因为它将转换为HTML5输入标记

<input name="txtTime" type="time">

Answer 2

使用MaskedEditExtender

 <cc1:MaskedEditExtender ID="meeInTime" runat="server" MaskType="Time"
            Mask="99:99" MessageValidatorTip="true" ErrorTooltipEnabled="true" TargetControlID="txtInTime"
            InputDirection="LeftToRight" AcceptNegative="Left">
 </cc1:MaskedEditExtender>

和总时间:

 var InTime = "10:5";
 var OutTime = "11.5";
 TimeSpan ts = DateTime.Parse(OutTime )-DateTime.Parse(InTime );
 double Hour = ts.TotalHours;

另一种选择

jquery控制。

jquery-timepicker