使用datetimepicker与ASP.NET控件时，修改页面如何显示数据库日期而非当前日期？

看起来你的核心问题是在编辑场景下，datetimepicker没有正确加载数据库中存储的日期，而是默认显示了当前日期。我们来一步步排查并解决这个问题：

问题根源分析 #

从你的代码来看，你依赖HiddenField HF_Date 的值来初始化datetimepicker，但可能存在以下几个问题：

• 数据库返回的日期格式和moment解析的格式不匹配，导致moment无法正确识别，最终 fallback 到当前日期
• 编辑模式下，HF_Date 的绑定值为空（可以通过浏览器开发者工具查看页面源码确认）
• 直接传递字符串给defaultDate，没有用moment对象处理，可能引发兼容性问题

优化方案 #

我们可以简化逻辑，直接利用已经绑定了数据库值的TextBox来初始化datetimepicker，同时确保日期被正确解析：

方案1：直接使用TextBox的绑定值（推荐） #

修改你的JavaScript代码，去掉对HiddenField的依赖，直接读取TextBox的内容：

jQuery(document).ready(function () { 
  const $dateInput = jQuery('.TB_Date');
  if ($dateInput.length) { 
    // 获取TextBox的绑定值，去除首尾空格
    const inputDate = $dateInput.val().trim();
    // 用moment解析日期：如果有值则用数据库日期，否则用当前日期
    // 注意："L"对应法语locale的日期格式（DD/MM/YYYY），要和datetimepicker的format保持一致
    const defaultDate = inputDate ? moment(inputDate, "L") : moment();
    
    $dateInput.datetimepicker({ 
      locale: 'fr', 
      daysOfWeekDisabled: [0, 6], 
      format: 'L',
      defaultDate: defaultDate 
    }); 
  } 
});

ASP.NET部分保持不变：

<asp:TextBox ID="TB_Date" CssClass="TB_Date" Text='<%# Bind("Date") %>' runat="server"></asp:TextBox>

方案2：修复HiddenField的日期解析逻辑 #

如果你坚持使用HiddenField，确保日期被moment正确解析：

jQuery(document).ready(function () { 
  const $hiddenDate = jQuery("#HF_Date");
  if ($hiddenDate.length) { 
    const dbDate = $hiddenDate.val().trim();
    // 这里假设数据库返回的是YYYY-MM-DD格式，如果是其他格式需要调整moment的解析参数
    const defaultDate = dbDate ? moment(dbDate, "YYYY-MM-DD") : moment();
    
    jQuery('.TB_Date').datetimepicker({ 
      locale: 'fr', 
      daysOfWeekDisabled: [0, 6], 
      format: 'L',
      defaultDate: defaultDate 
    }); 
  } 
});

额外检查步骤 #

1. 确认绑定值是否存在：在浏览器中打开页面，右键查看源码，检查HF_Date或TB_Date的value属性是否确实包含数据库中的日期值
2. 验证moment.js加载：确保moment.js和moment的法语locale文件已经正确引入，避免解析失败
3. 日期格式匹配：数据库返回的日期格式要和moment解析时指定的格式一致，否则会解析错误并 fallback到当前日期

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