Bootstrap Datepicker默认日期因格式不匹配显示异常的解决咨询

我来帮你搞定这个日期显示搞反的问题！核心原因其实很明确：你用new Date('{{ startDate }}')创建日期对象时，JavaScript会把dd/mm/yy格式的字符串误认为是mm/dd/yy，所以05/03/2018就被解析成了5月3日，而不是你想要的3月5日。

修正步骤和代码 #

我们需要手动处理startDate的格式，避免JavaScript自动解析出错，同时简化你的日期选择器初始化代码：

function toggle_dp() {
  $("#myModal").modal("show");
  
  // 拆分startDate字符串，提取日、月、年
  const startDateStr = '{{ startDate }}';
  const [day, month, year] = startDateStr.split('/');
  
  // 创建正确的Date对象：注意JS的月份是0-11，所以要减1
  const targetDate = new Date(year, month - 1, day);
  
  // 初始化日期选择器时直接设置好最终格式
  $("#datepicker").datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    defaultDate: targetDate
  });
}

关键说明 #

• 手动解析日期字符串：通过split('/')把dd/mm/yy拆分成日、月、年三个部分，再用Date(year, month-1, day)创建日期对象，彻底避免了格式混淆的问题。
• 简化格式设置：你之前先设置dd/mm/yy再改成dd-mm-yy的操作完全没必要，直接在初始化配置里写最终需要的格式即可。

额外小技巧 #

如果你的后端支持，也可以直接把startDate转换成yyyy-mm-dd的格式传给前端，这样JavaScript的Date构造函数就能直接正确解析，比如：

defaultDate: new Date('{{ startDate | date("Y-m-d") }}')

（这里假设你用的是Twig模板引擎，其他模板引擎也有类似的日期格式化方法）

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