JQuery datetimepicker加载时清空表单值的问题求助

这个问题我之前也踩过坑！本质原因是datetimepicker组件在初始化时，默认会用自身的内部状态覆盖输入框的现有value，而不是自动读取它。下面给你几个靠谱的解决办法：

方法一：初始化时指定默认值 #

直接在datetimepicker的配置选项里，把输入框已有的值传给defaultDate（不同库版本可能叫defaultDate或initialDate，根据你用的组件调整）。这样组件初始化时就会加载这个值，而不是清空输入框。

示例代码：

$(function () { 
  // 获取输入框原本存储的交易日期值
  const savedDate = $('#datetimepicker1').val();
  
  $('#datetimepicker1').datetimepicker({
    // 如果有值就转成Date对象，无值则设为null
    defaultDate: savedDate ? new Date(savedDate) : null,
    // 可以加上你需要的日期格式配置，和后端存储格式对应
    format: 'YYYY-MM-DD HH:mm:ss'
  });
});

如果你的项目依赖moment.js（很多datetimepicker组件都用它处理日期），用moment解析日期兼容性更好：

$(function () { 
  const savedDate = $('#datetimepicker1').val();
  
  $('#datetimepicker1').datetimepicker({
    defaultDate: savedDate ? moment(savedDate) : null,
    format: 'YYYY-MM-DD HH:mm:ss'
  });
});

方法二：初始化后手动同步值 #

如果第一种方法不生效，也可以先初始化组件，再手动把输入框的值同步给datetimepicker：

$(function () { 
  // 先初始化组件
  const datePicker = $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  }).data('datetimepicker');
  
  // 获取输入框的现有值并设置给组件
  const savedDate = $('#datetimepicker1').val();
  if (savedDate) {
    datePicker.date(new Date(savedDate));
  }
});

额外注意点 #

• 确保输入框value的格式和datetimepicker的format配置完全一致，否则组件无法解析日期，还是会显示空值。
• 如果你用的是jQuery UI版本的datetimepicker，配置项可能叫setDate，核心思路不变：初始化时传入已有值。

这样修改后，编辑交易时输入框就能正常显示之前存储的交易日期啦！

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