如何避免重复初始化Tempus Dominus日期选择器？

针对你遇到的重复初始化导致选择器叠加的问题，有两种可靠的解决方式：

方法一：利用Tempus Dominus内置的getInstance方法 #

Tempus Dominus提供了静态方法getInstance，可以直接检查目标元素是否已经绑定了日期选择器实例，返回null则说明未初始化：

$("#add").on("click", function(e) {
  e.preventDefault();
  bind_all_date_in_table();
});

function bind_all_date_in_table() {
  // 遍历表格的每一行（修正原代码中jQuery对象使用forEach的错误）
  $("#table tr").each(function() {
    const dateinput = $(this).find(".dateinput")[0];
    // 检查是否已有初始化实例
    const existingPicker = tempusDominus.TempusDominus.getInstance(dateinput);
    if (!existingPicker) {
      const dateinputPicker = new tempusDominus.TempusDominus(dateinput);
      dateinputPicker.subscribe("change.td", (e) => {
        // 对当前行执行相关操作
      });
    }
  });
}

方法二：给已初始化元素添加标记属性 #

通过自定义data-*属性标记已完成初始化的输入框，每次初始化前先检查该属性：

$("#add").on("click", function(e) {
  e.preventDefault();
  bind_all_date_in_table();
});

function bind_all_date_in_table() {
  $("#table tr").each(function() {
    const dateinput = $(this).find(".dateinput")[0];
    // 检查是否有已初始化标记
    if (!dateinput.dataset.tdInitialized) {
      const dateinputPicker = new tempusDominus.TempusDominus(dateinput);
      dateinputPicker.subscribe("change.td", (e) => {
        // 对当前行执行相关操作
      });
      // 添加标记，避免重复初始化
      dateinput.dataset.tdInitialized = "true";
    }
  });
}

额外提示 #

如果涉及删除行操作，建议在删除前调用实例的dispose()方法清理资源，并移除标记属性，避免内存泄漏：

// 示例：删除行时清理实例
function deleteRow(row) {
  const dateinput = row.querySelector(".dateinput");
  const picker = tempusDominus.TempusDominus.getInstance(dateinput);
  if (picker) {
    picker.dispose();
    delete dateinput.dataset.tdInitialized;
  }
  row.remove();
}

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