动态表格中无需手动设置索引的jQuery日期选择器绑定方法

我在一个可通过按钮新增字段的动态表格中使用了日期选择器（datepicker），目前所有功能正常，但每个输入框的ID都带有唯一索引。我希望无需手动设置这些索引，而是通过循环自动为该列的每个输入框完成日期选择器的绑定操作，无论索引值是什么。

当前可行代码 #

jQ("[id^='RequestDateone[0]").datetimepicker({
    timepicker:false,
    formatDate:'Y/m/d',
    maxDate:'+1970/01/01',//yesterday is minimum date(for today use 0 or -1970/01/01)
});   

尝试的写法 #

jQ('[id^="RequestDateone["]').datetimepicker.each(function (index, item)

对应的HTML代码 #

<input type="text"  data-timsupport="datepicker" name="RequestDatetwo" id="RequestDatetwo"    class="small" />

你的尝试写法存在两个问题：

• 选择器语法错误：方括号是CSS选择器的特殊字符，需要转义；
• 调用顺序错误：应该先选中元素再执行循环，而非直接在datetimepicker后链式调用each。

下面给出两种可行的实现方式，以及动态新增字段的处理方案：

方案一：通过ID前缀匹配绑定 #

针对ID以RequestDateone[开头的输入框，修正选择器后循环绑定：

// 转义方括号，匹配所有ID以RequestDateone[开头的输入框
jQ('[id^="RequestDateone\\["]').each(function() {
    jQ(this).datetimepicker({
        timepicker: false,
        formatDate: 'Y/m/d',
        maxDate: '+1970/01/01' // 最大日期设为昨天
    });
});

方案二：利用自定义属性统一绑定（更推荐） #

你的HTML中已经有data-timsupport="datepicker"这个自定义属性，直接用它选择所有需要绑定的输入框，无需依赖ID，适配性更强：

jQ('[data-timsupport="datepicker"]').each(function() {
    jQ(this).datetimepicker({
        timepicker: false,
        formatDate: 'Y/m/d',
        maxDate: '+1970/01/01' // 最大日期设为昨天
    });
});

动态新增字段的处理 #

上述代码仅对页面加载时已存在的元素生效，新增字段后需要重新绑定。可以把绑定逻辑封装成函数，在页面初始化和新增字段后分别调用：

// 封装绑定逻辑，避免重复绑定已初始化的控件
function bindDatepickers() {
    jQ('[data-timsupport="datepicker"]').not('.has-datepicker').datetimepicker({
        timepicker: false,
        formatDate: 'Y/m/d',
        maxDate: '+1970/01/01'
    });
}

// 页面加载完成后初始化绑定
jQ(document).ready(function() {
    bindDatepickers();
});

// 新增字段按钮的点击事件中调用
jQ('#add-field-btn').click(function() {
    // 这里写新增输入框的逻辑
    // ...
    
    // 重新绑定日期选择器
    bindDatepickers();
});

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