这个问题的核心原因是Edge等现代浏览器会识别[DataType(DataType.Date)]特性，自动将输入框渲染为HTML5原生的日期控件，而这个原生控件会完全覆盖你自定义的EditorTemplate和jQuery UI Datepicker的行为，导致显示异常。原生日期控件有两个关键特性和你的现有代码冲突：

1. 它要求输入值必须是ISO格式（yyyy-MM-dd），而你用ToLongDateString()输出的格式不被识别，所以显示默认占位符mm/dd/yyyy；
2. 它自带一套浏览器原生的样式和选择器，会替代jQuery UI的样式。

下面给你几个可行的修复方案，按需选择：

方案一：强制使用自定义文本框+jQuery UI Datepicker（推荐，保留原有交互） #

修改你的EditorTemplate，明确指定输入框类型为text，避免触发浏览器的原生日期控件：

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToLongDateString() : string.Empty), new { @class = "datePicker", @style = "width:200px;", type = "text" })

同时调整JavaScript的选择器，从input[type=date]改为匹配你的自定义类名.datePicker（因为现在输入框类型是text了）：

var constantDateFormat = "dd MM yy";
$(".datePicker").datepicker({ 
    showOn: "both", 
    dateFormat: constantDateFormat, 
    changeMonth: true, 
    changeYear: true 
});

这样Edge就会把它当成普通文本框，你的自定义日期选择器就能正常工作了。

方案二：适配原生日期控件（如果想改用浏览器原生交互） #

如果你想使用Edge的原生日期选择器，需要调整日期格式为ISO标准，同时移除jQuery UI的绑定：

1. 修改EditorTemplate，输出ISO格式的日期值：

@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("yyyy-MM-dd") : string.Empty, new { @class = "datePicker", type = "date" })

2. 移除或注释掉jQuery UI Datepicker的绑定代码，原生控件会自带日期选择功能，样式由浏览器统一提供。

方案三：移除DataType特性（最简单的快速修复） #

直接从ViewModel中去掉[DataType(DataType.Date)]特性：

[Display(Name = "Complete By")]
// 移除这一行：[DataType(DataType.Date)]
public Nullable<DateTime> CompleteBy { get; set; }

这样MVC会默认渲染普通的text输入框，你的原有EditorTemplate和jQuery代码就能直接正常运行，无需其他修改。

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