Razor页面使用Html Helper设置时间时时间选择器显示异常求助

解决方案 #

你需要修改两处配置即可解决异常：

1. 修正时间格式字符串：你当前使用的HH:mm是24小时制格式，且缺少占位符包裹。要显示12小时制带AM/PM标记，需将格式改为带tt标识的{0:hh:mm tt}
2. 指定区域属性：HTML原生type="time"输入框的显示格式默认跟随系统/浏览器的区域设置，添加lang="en-US"属性可以强制按英文区域逻辑显示AM/PM标识。

修改后的完整视图代码如下：

<div class="col-md-2">
   @Html.TextBoxFor(model => model.Attempt1.Date, "{0:yyyy-MM-dd}", new { type = "date", @class = "form-control" })
</div>
<div class="col-md-2">
   @Html.TextBoxFor(model => model.Attempt1.Time, "{0:hh:mm tt}", new { type = "time", @class = "form-control", lang = "en-US" })
</div>

额外注意事项 #

如果修改后仍然无法正常显示AM/PM，检查你的模型中Attempt1.Time字段的类型：

• 若字段为TimeSpan类型，本身仅支持24小时制表示，无法识别tt格式的AM/PM标记，需将字段改为DateTime类型即可正常适配
• 若需要兼容所有区域用户的显示效果，不受浏览器区域设置影响，建议替换为第三方前端时间选择器组件实现完全自定义样式。

内容的提问来源于stack exchange，提问作者blue piranha