如何配置实现所有设备统一使用DD/MM/YYYY日期显示格式

问题原因 #

你遇到的不同设备日期格式不一致的核心原因是<input type="date">为浏览器原生控件，其显示格式完全跟随用户设备的系统区域/语言设置，前端无法直接修改原生控件的展示规则，仅提交给后端的实际值为统一的YYYY-MM-DD标准格式。要实现全设备统一显示DD/MM/YYYY格式，可以按以下两种场景选择方案：

方案1：保留原生date输入框，仅统一输出/展示格式 #

如果不需要修改输入环节的显示样式，只需要在页面展示、接口返回数据时格式统一，按以下步骤配置即可：

• 后端模型添加格式化注解
  给Bdate属性添加DisplayFormat特性指定输出格式：

  public class ClassA
  {
      [Column(TypeName = "date")]
      [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = false)]
      public DateTime? Bdate { get; set; }
  }
  

  纯展示场景直接调用格式化方法即可：@Model.Bdate?.ToString("dd/MM/yyyy")
• 全局配置JSON返回格式（接口场景适用）
  如果你是前后端分离项目或者需要返回JSON格式数据，在.NET 6+的Program.cs中添加全局日期序列化配置：

  builder.Services.AddControllersWithViews()
      .AddJsonOptions(options =>
      {
          options.JsonSerializerOptions.DateFormatString = "dd/MM/yyyy";
      });
  

方案2：统一输入+展示全链路格式 #

如果需要输入环节所有设备都显示DD/MM/YYYY格式，放弃原生type="date"控件，改用文本输入框配合自定义日期选择插件实现：

• 修改前端输入框代码

  <input type="text" asp-for="@Model.Bdate" class="date-picker" placeholder="DD/MM/YYYY">
  

• 初始化日期选择器时指定格式（以常用的flatpickr为例）

  flatpickr('.date-picker', {
      dateFormat: 'd/m/Y',
      allowInput: true
  });
  

• 补充校验规则：前端添加正则校验^\d{2}/\d{2}/\d{4}$，避免用户输入不符合格式的日期，后端也可以同步添加格式校验逻辑。

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