点击日历按钮时如何获取选中日期并动态插入到指定区域

具体修改方案如下： #

1. 修改日历日期的点击事件逻辑，传递选中的年月日参数

找到代码中渲染日历日期的部分，修改onclick绑定逻辑，将当前日历对应的年、月、日作为参数传入addRow函数：

// 原代码
// var m = g(new Date(t, n - 1, v)) ? '<div class="today" type="button" onclick="addRow()">' : '<div type="button" onclick="addRow()">';
// l.append(m + "" + v + "</div>");

// 修改后代码
var m = g(new Date(t, n - 1, v)) ? `<div class="today" type="button" onclick="addRow(${t},${n},${v})">` : `<div type="button" onclick="addRow(${t},${n},${v})">`;
l.append(m + "" + v + "</div>");

2. 改造addRow函数，动态生成选中日期

修改addRow函数接收年月日参数，对日期做补零处理后，替换原模板中的静态日期：

function addRow(year, month, day) {
  // 补零处理，保证月、日均为两位格式
  const formatNum = num => num < 10 ? `0${num}` : num
  // 拼接为你需要的 dd.mm.yyyy 格式
  const selectDate = `${formatNum(day)}.${formatNum(month)}.${year}`
  document.querySelector("#content").insertAdjacentHTML(
    "afterbegin",
    `<tr>
    <td>${selectDate}</td>
    <td>
      <div class="custom-select">
        <select>
          <option value="0">IS</option>
          <option value="1">IS 1</option>
          <option value="2">IS 2</option>
        </select>
      </div>
    </td>
  </tr>`
  );
}

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