如何使ASP.NET Core的DateTime选择器支持时间选择?
解决DateTime选择器仅支持日期无法选时间的问题
问题根源在Model里的DataType(DataType.Date)属性,它会让ASP.NET生成仅支持日期选择的type="date"输入框,要添加时间选择功能,按以下步骤修改:
1. 修改Model数据类型属性
把DataType(DataType.Date)替换为DataType(DataType.DateTime),这样框架会生成支持日期+时间的输入控件:
[Display(Name = "开始时间")] [DataType(DataType.DateTime)] [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy HH:mm}", ApplyFormatInEditMode = true)] public DateTime BookingStartDate { get; set; }
2. 修正View中的min属性格式
浏览器的datetime-local类型输入框要求min属性的格式为yyyy-MM-ddTHH:mm(注意中间的T分隔符),原代码里的格式不符合要求,需要调整:
<input asp-for="BookingStartDate" min="@DateTime.Now.ToString("yyyy-MM-ddTHH:mm")" asp-format="{0:dd/MM/yyyy HH:mm}" class="form-control" />
补充说明
- 修改后浏览器会渲染原生的日期时间选择器,支持同时选择日期和时间,主流浏览器(Chrome、Edge、Firefox)都已支持该控件。
- 如果需要兼容更老的浏览器,可以考虑使用第三方日期时间选择插件(比如jQuery UI DateTimePicker),但原生控件在现代浏览器中体验更好。
内容的提问来源于stack exchange,提问作者Waller
相关产品推荐
相关产品推荐

