HTML表格新增行内下拉日历（drop down calendar）无法显示的问题

这个问题很常见——你页面加载时初始化了datepicker，但动态创建的新元素并没有被绑定日历组件，因为jQuery的datepicker()只会作用于调用时已经存在于DOM中的元素。

修复步骤： #

只需要在你动态创建输入框之后，立即给它初始化datepicker组件就行。直接修改你的addRow函数：

function addRow() {
  var table = document.getElementById("mintable");
  var rowCount = parseInt(document.getElementById("minRows").value);
  var rowInsert = parseInt(document.getElementById("sizemin").value);
  var row = table.insertRow(rowInsert + 1);
  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "text";
  element1.id = "minenddate" + (rowCount);
  element1.className = "form-control";
  // 新增这一行：给新创建的输入框绑定datepicker
  $(element1).datepicker();
  cell1.appendChild(element1);
  rowCount = parseInt(rowCount) + 1;
  document.getElementById("minRows").value = rowCount;
  document.getElementById("sizemin").value = parseInt(document.getElementById("sizemin").value) + 1;
}

额外优化建议： #

你原来的初始化代码可以简化一下，不需要多余的循环（因为初始只有#datepicker20一个元素），直接写：

$(function() {
  // 初始化已有的日期输入框
  $("#datepicker20").datepicker();
});

这样修改后，无论是页面初始的输入框，还是点击"Add Row"新增的输入框，都能正常触发下拉日历了。

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