加载表单时从ViewModel向Bootstrap Datetimepicker填充日期问题

遇到过一模一样的坑！这种情况基本是两个核心原因：日期格式不匹配，或者Datetimepicker初始化时没有读取输入框已有的值——尤其是你只需要月份视图的场景，格式设置是关键。

解决方案分这几步来： #

1. 统一ViewModel和前端的日期格式
   先在你的ViewModel日期字段上加上DisplayFormat特性，明确指定月份格式（比如yyyy-MM）：

   public class YourViewModel
   {
       [DisplayFormat(DataFormatString = "yyyy-MM", ApplyFormatInEditMode = true)]
       public DateTime? TargetMonth { get; set; }
   }
   

   然后生成TextBox时，也要指定相同格式，确保输入框能渲染出正确的日期字符串：

   @Html.TextBoxFor(m => m.TargetMonth, "{0:yyyy-MM}", new { @class = "form-control month-picker" })
   

2. 初始化Datetimepicker时强制读取现有值
   插件默认可能会用当前日期覆盖输入框的原有值，所以初始化时要明确把输入框的现有值设为默认日期，同时匹配格式和视图模式：

   $(document).ready(function() {
       $('.month-picker').datetimepicker({
           format: 'YYYY-MM', // 和ViewModel的格式完全对应
           viewMode: 'months', // 只展示月份选择视图
           defaultDate: $('.month-picker').val() // 关键！用输入框已有的值初始化
       });
   });
   

   如果你的日期字段是可空类型，可以加个空值判断避免报错：

   defaultDate: $('.month-picker').val() || null
   

3. 排查初始化时机问题
   一定要确保JS代码在DOM加载完成后执行（也就是放在$(document).ready()里），否则插件初始化时输入框还没渲染出值，自然无法显示。

额外排查点 #

如果还是不生效，可以打开浏览器控制台，检查输入框的value属性有没有正确渲染出日期字符串：

• 如果输入框本身没值：那要检查ViewModel的赋值是否正确，或者Controller有没有把数据正确传递到视图；
• 如果输入框有值但插件没显示：那肯定是插件的格式或初始化配置问题，再核对一遍格式匹配度。

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