Kendo DatePicker/DateTimePicker日期格式与回传解析异常问题

相关代码 #

视图代码（CSHTML） #

@using (Html.BeginForm("", "", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(m => m.MyDate)
                <br />
                @Html.Kendo().DatePickerFor(m => m.MyDate).Format("dd/MM/yyyy")
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(m => m.MyDateTime)
                <br />
                @Html.Kendo().DateTimePickerFor(m => m.MyDateTime).Format("dd/MM/yyyy").HtmlAttributes(new { Placeholder = "Latest"})
            </div>                           
        </div>
    </div>
    <button type="submit" class="btn btn-primary">MyButton</button>
}

控制器代码 #

public ActionResult Index()
{
    return MyFunc(DateTime.UtcNow.AddDays(1).ConvertUtcToLocal(), null);
}

public ActionResult MyFunc(DateTime theDate, DateTime? mydatetime)
{
    // 无关代码省略

    return View("", new MyModel
    {
        MyDate = theDate.Date,
        MyDateTime= mydatetime
    });
}

自定义方法ConvertUtcToLocal用于将UTC时间转换为本地时间。

遇到的问题 #

问题1：DateTimePicker首次加载仅显示占位符 #

首次加载页面时，Index方法生成的theDate为2/22/2024（UTC+1天转本地），DatePicker正常显示22/02/2024，但DateTimePicker仅显示占位符"Latest"，无法渲染日期时间选择组件。

问题2：前后端日期格式不匹配导致解析错误 #

提交表单后，MyFunc接收的theDate值为1/1/0001；前端选择03/09/2023（实际为2023年9月3日），后端会解析为2023年3月9日，同时UI显示变为09/03/2023，出现日期错位。

问题原因与解决方案 #

针对问题1 #

原因：MyDateTime初始值为null，且DateTimePicker仅配置了日期格式dd/MM/yyyy，未包含时间部分，组件无法触发日期时间选择器的渲染逻辑。
解决：

• 若需要默认显示时间，将Index方法传入的null替换为本地时间，例如DateTime.UtcNow.ConvertUtcToLocal()
• 为DateTimePicker补充时间格式，修改为：

  @Html.Kendo().DateTimePickerFor(m => m.MyDateTime)
      .Format("dd/MM/yyyy HH:mm")
      .HtmlAttributes(new { Placeholder = "Latest"})
  

• 若允许空值但需显示选择器，确保Model中MyDateTime为可空类型DateTime?，Kendo组件会自动渲染选择器，仅无值时显示占位符。

针对问题2 #

原因：ASP.NET MVC默认以MM/dd/yyyy格式解析日期，而前端Kendo组件传递的是dd/MM/yyyy格式，导致解析失败或错位。
解决：

1. 设置全局日期解析文化：在Global.asax.cs的Application_Start中添加代码，指定使用dd/MM/yyyy格式的文化：

   ModelBinders.Binders.Add(typeof(DateTime), new DateTimeModelBinder { Culture = new CultureInfo("en-GB") });
   ModelBinders.Binders.Add(typeof(DateTime?), new DateTimeModelBinder { Culture = new CultureInfo("en-GB") });
   

2. 为Kendo组件配置解析格式：同时设置Format和ParseFormats，确保前后端格式一致：

   @Html.Kendo().DatePickerFor(m => m.MyDate)
       .Format("dd/MM/yyyy")
       .ParseFormats(new string[] { "dd/MM/yyyy" })
   
   @Html.Kendo().DateTimePickerFor(m => m.MyDateTime)
       .Format("dd/MM/yyyy HH:mm")
       .ParseFormats(new string[] { "dd/MM/yyyy HH:mm", "dd/MM/yyyy" })
   

3. Model添加数据注解：在Model属性上标注格式，确保渲染和解析统一：

   [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
   public DateTime MyDate { get; set; }
   
   [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy HH:mm}", ApplyFormatInEditMode = true)]
   public DateTime? MyDateTime { get; set; }
   

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