MVC中bootstrap datetimepicker控件表单回发后值为空问题排查

可能的原因 #

• datetimepicker初始化逻辑没有读取输入框已有的回发值：你当前的初始化代码仅配置了基础参数，控件初始化时会默认清空关联输入框内容，不会主动读取输入框中已经由MVC框架填充的DoB回发值。
• 日期格式不匹配：如果后端回发的DoB值格式和datetimepicker配置的MM/DD/YYYY格式不一致，控件无法正确解析日期，就会显示为空。比如后端返回的是yyyy-MM-dd格式、或者带时间片段的DateTime类型，都会出现解析失败的情况。
• 绑定层级问题：你是将datetimepicker绑定在外层的div#datetimepicker1上，而非直接绑定在input输入框上，这种情况下控件默认不会主动同步input内的已有值。

修复方案 #

修改datetimepicker初始化逻辑，初始化时主动读取输入框的已有值作为控件默认值即可，示例代码如下：

// 先读取输入框中MVC已填充的回发值
let dobInputVal = $('.dobinit').val();
$('#datetimepicker1').datetimepicker({
    format: "MM/DD/YYYY",
    minDate: "01/01/1900",
    maxDate: "@today",
    // 存在回发值时赋值给默认日期参数
    defaultDate: dobInputVal ? new Date(dobInputVal) : null
});

如果存在日期格式不匹配的问题，可以在赋值前先做格式转换，保证传入的日期符合MM/DD/YYYY格式：

let dobInputVal = $('.dobinit').val();
let formatDob = null;
if(dobInputVal){
    let rawDate = new Date(dobInputVal);
    formatDob = `${(rawDate.getMonth()+1).toString().padStart(2,'0')}/${rawDate.getDate().toString().padStart(2,'0')}/${rawDate.getFullYear()}`;
}
$('#datetimepicker1').datetimepicker({
    format: "MM/DD/YYYY",
    minDate: "01/01/1900",
    maxDate: "@today",
    defaultDate: formatDob
});

也可以在控件初始化完成后手动调用API赋值：

$('#datetimepicker1').datetimepicker({
    format: "MM/DD/YYYY",
    minDate: "01/01/1900",
    maxDate: "@today"
});
// 初始化完成后手动赋值
if($('.dobinit').val()){
    $('#datetimepicker1').data("DateTimePicker").date(new Date($('.dobinit').val()));
}

另外建议检查Model中DoB字段是否为DateTime?可空类型，如果设置为不可空的DateTime类型，未传值时后端会默认返回0001/01/01，控件无法识别该日期也会显示为空。

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