ASP.NET MVC中Datepicker日历不显示及日期格式不符问题

一、TextBoxFor 日历弹窗不显示的问题 #

你的@Html.TextBoxFor写法存在错误，嵌套了不必要的htmlAttributes层级，导致HTML属性未正确生成，jQuery无法定位目标元素绑定datepicker。

修正后的Razor代码：

@Html.LabelFor(x => x.Birthdate)
@Html.TextBoxFor(x => x.Birthdate, new { @class = "form-control", @placeholder = "Select birth date", id = "mydate" })
@Html.ValidationMessageFor(x => x.Birthdate, null, new { @class = "text-danger" })

对应的绑定脚本（选择器需匹配修正后的id）：

$(document).ready(function () {
    $("#mydate").datepicker({
        dateFormat: "dd/mm/yy", // 指定dd/mm/yyyy格式
        changeMonth: true,
        changeYear: true
    });
});

二、日期格式强制为dd/mm/yyyy的问题 #

不要使用<input type="date">，这是HTML5原生日期控件，其显示格式由浏览器区域设置控制，且会与jQuery UI Datepicker冲突。改用普通文本输入框（即上述修正后的TextBoxFor生成的控件），通过jQuery UI的dateFormat参数控制显示格式。

同时，为保证后端模型能正确解析dd/mm/yyyy格式的日期，需在模型的Birthdate属性上添加特性：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime Birthdate { get; set; }

这样前端显示的日期格式为dd/mm/yyyy，后端也能正确绑定提交的日期值。

内容的提问来源于stack exchange，提问作者DeP.