Bootstrap datepicker绑定相同类/名称的多个输入框仅首个生效如何解决

问题复现 #

你有如下属性完全相同的输入框：

<input type="text" class="form-control date-field" name="purchase-date[]"/>
<input type="text" class="form-control date-field" name="purchase-date[]"/>
<input type="text" class="form-control date-field" name="purchase-date[]"/>

尝试了以下两种初始化代码，都仅第一个输入框能唤起日期选择器：

$('input[name="purchase-date[]"]').datepicker({
  format: "yyyy-mm-dd",
  autoclose: true
});

$('input[class="date-field"]').datepicker({
  format: "yyyy-mm-dd",
  autoclose: true
});

问题原因 #

• 类选择器写法错误：$('input[class="date-field"]')为精确匹配class属性的完整值，你的输入框同时包含form-control和date-field两个类，因此该选择器无法匹配到目标元素。
• 动态元素未绑定：如果后两个输入框是页面加载完成后动态生成的，页面初始化时执行的绑定逻辑只会作用于当时已存在的DOM元素，后续新增的元素不会自动绑定日期选择器能力。

修复方案 #

1. 修正类选择器写法 #

使用jQuery类选择器$('.date-field')匹配所有包含date-field类的元素，该写法不限制元素是否有其他类，适配静态存在的所有输入框：

// 初始化时跳过已经绑定过datepicker的元素，避免重复绑定异常
$('.date-field').not('.datepicker-input').datepicker({
  format: "yyyy-mm-dd",
  autoclose: true
});

2. 动态生成元素额外绑定 #

如果输入框是点击新增等操作动态生成的，在每次新增输入框后，单独给新生成的元素初始化日期选择器即可：

// 示例：新增输入框后单独初始化
const newInput = $('<input type="text" class="form-control date-field" name="purchase-date[]"/>');
// 插入到容器后执行初始化
$('.form-container').append(newInput);
newInput.datepicker({
  format: "yyyy-mm-dd",
  autoclose: true
});

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