ASP.NET WebForms输入12小时制时间自动转24小时制的解决咨询

问题根源 #

1. <asp:TextBox TextMode="Time">会渲染为HTML5的<input type="time">控件，该控件默认采用24小时制处理时间，不支持AM/PM标识，导致输入的11:30 pm被浏览器自动转换为23:30提交到后台。
2. 后台代码中使用ToString("HH:mm")格式化时间，HH是24小时制格式符，会丢失AM/PM信息，最终输出不符合预期的格式。

修复步骤 #

1. 修改前端TextBox配置

移除TextMode="Time"，改为普通文本输入框，让用户可以直接输入带AM/PM的12小时制时间：

<form id="form1" runat="server">
    <div>
        <asp:Label ID="lblDate" runat="server" Text="Date"></asp:Label>
        <asp:TextBox ID="txtDate" runat="server" TextMode="Date" AutoPostBack="True" OnTextChanged="txtDate_TextChanged"></asp:TextBox>
        <asp:Label ID="lblFromTime" runat="server" Text="FromTime"></asp:Label>
        <!-- 移除TextMode="Time" -->
        <asp:TextBox ID="txtFromTime" runat="server" AutoPostBack="True" OnTextChanged="txtFromTime_TextChanged"></asp:TextBox>
    </div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>

2. 调整后台代码逻辑

使用hh:mm tt格式符（hh为12小时制，tt为AM/PM标识）来解析和格式化时间，同时增加输入验证避免格式错误：

protected void txtFromTime_TextChanged(object sender, EventArgs e)
{
    // 解析日期
    if (DateTime.TryParse(txtDate.Text, out DateTime transactionDate))
    {
        // 指定支持的时间格式，兼容12小时制带AM/PM和24小时制输入
        string[] validTimeFormats = { "hh:mm tt", "h:mm tt", "HH:mm" };
        // 使用固定文化解析，避免服务器区域设置影响
        var culture = System.Globalization.CultureInfo.InvariantCulture;

        // 解析时间
        if (DateTime.TryParseExact(txtFromTime.Text.Trim(), validTimeFormats, culture, 
            System.Globalization.DateTimeStyles.None, out DateTime fromTime))
        {
            // 按要求格式拼接日期和时间
            string eventDate = $"{transactionDate:dd/MM/yyyy} {fromTime:hh:mm tt}";
            Label1.Text = eventDate;
        }
        else
        {
            Label1.Text = "时间格式错误，请输入如 11:30 pm 或 23:30 的格式";
        }
    }
    else
    {
        Label1.Text = "日期格式错误";
    }
}

额外说明 #

如果必须保留TextMode="Time"的HTML5时间控件，需要通过JavaScript在前端处理12小时制的显示转换，但这种方式复杂度较高，且不同浏览器的兼容性差异大，因此推荐使用普通文本框配合后台格式验证的方案。

内容的提问来源于stack exchange，提问作者ahmed abdelaziz