使用jQuery触发bootstrap-datepicker今日日期点击事件遇阻求助

直接用jQuery的.click()方法无法触发bootstrap-datepicker的日期选择事件，因为插件内部有独立的事件机制，正确做法是使用插件提供的API来设置日期并触发对应事件。

问题分析 #

你当前代码存在两个核心问题：

• 重复初始化datepicker（分别在$(document).ready和绑定changeDate事件时各初始化一次），易引发逻辑冲突
• 尝试用原生点击事件触发插件的日期选择逻辑，不符合插件运行机制

解决方案 #

修改代码如下，通过插件的setDate方法设置目标日期，再手动触发changeDate事件加载对应选项：

$(document).ready(function() {
  // 仅初始化一次datepicker实例
  const $datepicker = $('#datepicker').datepicker();

  // 绑定日期变更事件
  $datepicker.on('changeDate', function(e) {
    $('#radioChoices').empty();
    const dateClick = e.format(0, "yyyy-mm-dd");
    const selected_data = data[dateClick];
    
    let html = "";         
    for (let i = 0; i < selected_data.length; i++) {
      const d = selected_data[i];
      html += get_timeslot_div(d);
    }
    $('#radioChoices').append(html);
  });

  // 自动设置今日日期并触发事件
  // 若需加载data-date属性的默认日期，可替换为：const targetDate = $datepicker.data('date');
  const today = new Date();
  const formattedToday = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  
  // 通过插件API设置日期并触发变更事件
  $datepicker.datepicker('setDate', formattedToday).trigger('changeDate');
});

var data = {
"2023-03-11":[
{"choice":"Apples"},
{"choice":"Cherry"}
],
"2023-03-12":[
{"choice":"Bananas"},
{"choice":"Oranges"}
],
"2023-03-13":[
{"choice":"Pineapple"},
{"choice":"Grapes"}
],
"2023-03-14":[
{"choice":"Plum"},
{"choice":"Pear"}
]
}

function get_timeslot_div(d) {
  return `<div>${d['choice']}</div>`
}

关键改动说明 #

• 只初始化一次datepicker实例，避免重复初始化导致的状态混乱
• 使用datepicker('setDate', 日期值)设置目标日期，这是插件官方支持的标准方法
• 调用.trigger('changeDate')手动触发事件，让绑定的逻辑自动执行，加载对应日期的选项
• 若不需要加载今日日期，而是加载data-date属性中的默认值，可将formattedToday替换为$datepicker.data('date')

补充提示 #

bootstrap-datepicker的所有操作都应通过官方API执行，而非直接操作DOM原生事件，这样才能保证插件内部状态与业务逻辑同步。

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