如何在Bootstrap-datepicker的td中插入折叠式div或按钮

• 核心问题：折叠目标ID重复
  你当前代码里所有活动都使用了同一个id="mydiv"，Bootstrap折叠组件依赖唯一ID定位目标容器，重复ID会导致点击逻辑混乱，无法正常触发展开/折叠。

• 修改方案

  1. 为每个活动生成唯一ID，结合日期、活动索引或活动自身标识避免冲突：

     // 遍历special_event时，动态生成唯一折叠ID
     special_event.forEach((obj, index) => {
       obj.date = new Date(obj.date).toDateString();
       // 用日期+索引生成唯一ID，替换空格避免DOM ID非法字符
       const uniqueId = `event-collapse-${obj.date.replace(/\s/g, '-')}-${index}`;
       // 拼接带唯一ID的折叠触发按钮与详情容器
       obj.name = `<div class="special-event-f7e6c1" data-toggle="collapse" data-target="#${uniqueId}" aria-expanded="false" aria-controls="${uniqueId}">Grade1</div>
                   <span class="text-secondary">4PM-5PM</span>
                   <div class="text-dark collapse" id="${uniqueId}">Instructor Name1</div>`;
       eventObj.push(obj);
     });
     

  2. 保留原有beforeShowDay逻辑即可，确保HTML内容正常渲染到日期单元格中。

• 额外注意事项

  • 若渲染后折叠仍不生效，需确认已正确引入Bootstrap的JS文件（包含collapse组件）；
  • 可在datepicker显示完成后重新初始化折叠组件：

    $('.datepicker').datepicker({
      // 你的配置项
      beforeShowDay: function(date){
        // 原有日期匹配逻辑
        for(let i=0;i<eventObj.length;i++){
          let con="&bull;"+eventObj[i].name;
          if(date.toDateString()==eventObj[i].date){
            return {classes: "highlight", tooltip:"Title",content:date.getDate()+'<br/>'+con};
          }
        }
      }
    }).on('shown.bs.datepicker', function() {
      // 重新初始化折叠组件
      $('[data-toggle="collapse"]').collapse();
    });
    

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