如何强制ui-datepicker采用yyyy-MM-dd日期格式？配置后仍无效

核心原因 #

jQuery UI Datepicker的日期格式是独立于ASP.NET模型注解的，后端的DisplayFormat只会影响.NET的模型绑定和默认渲染，不会直接控制前端插件的显示格式。插件默认使用MM/dd/yyyy，必须单独配置。

解决步骤 #

1. 初始化Datepicker时指定格式
   在页面的JavaScript代码中，为ui-datepicker类的控件初始化时设置dateFormat选项（注意jQuery UI的格式符号和.NET不同：yy对应4位年份，mm对应两位月份，dd对应两位日期）：

   $(function() {
     $(".ui-datepicker").datepicker({
       dateFormat: "yy-mm-dd"
     });
   });
   

2. 避免原生HTML5日期控件冲突
   视图中使用了type="date"，原生HTML5日期输入框的显示格式由浏览器决定，且会和jQuery UI Datepicker产生冲突。建议将type改为text：

   <input asp-for="InvoiceUtc" class="form-control ui-datepicker" type="text" placeholder="Start Date" required value="@Model.UserDefaultInvoiceUtc.ToString("yyyy-MM-dd")" />
   

3. 确保后端绑定格式一致（可选）
   为了保证后端接收日期时格式统一，可以给InvoiceUtc属性也添加DisplayFormat注解：

   [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
   public DateTime InvoiceUtc { get; set; }
   

   或者在全局配置中设置默认日期格式（.NET 6+）：

   builder.Services.AddControllersWithViews()
       .AddMvcOptions(options =>
       {
           options.FormatterMappings.SetFormatterMappingForType(typeof(DateTime), FormatterMappingSource.Header, "yyyy-MM-dd");
       });
   

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