Javascript 具有独立的最小-最大日期依赖项的多个动态Jquery日期选择器

循环完成后，显示所有字段

但仅将上次输入作为日期选择器（不是我所需的所有字段

控制台上无错误显示

所有出现的值均存在、有效且已检查

动态ID也可以在html源代码中看到，但例如，如果4个日期选择器（2个从日期选择器，2个到日期选择器），则仅显示最后一个日期选择器

有人能提出这里可能存在的问题吗

在JSFIDLE上创建的示例情况

---

在当前jquery代码中，您正在使用

.html（）

这将删除所有以前的html，并将新的html添加到您的

dom

。因此，

html

变量中包含

tr

，但在每次迭代中，您都会删除以前的html并添加新的html，因为

datepicker

在每次迭代中都找不到需要初始化的输入

v.id

值因此，请删除所有

.html（）

code并使用

.append（）

演示代码：

$（函数（）{
数据=[{
id:1，
日期：2021年6月22日，
日期：“22-07-2021”
},
{
id:2，
日期：2021年7月15日，
日期：“15-08-2020”
},
{
id:3，
日期：2021年6月12日，
日期：“12-07-2021”
},
{
id:4，
日期：2021年6月17日，
日期：“17-07-2021”
}
];
$（“#div”）.html（“”）
$（数据）。每个功能（i、v）{
//在这里使用append
$（“#div”）.append（```）
//然后访问输入。。
$（“#PendingActManagerDomainInformFromDate”+v.id）.datepicker({
日期格式：“dd-mm-yy”，
minDate:新日期（），
maxDate:$（“#PendingActManagerDomainInformToDate”+v.id）.val（），
onSelect：功能（已选择）{
$（“#PendingActManagerDomainInformToDate”+v.id）.datepicker（“选项”，“minDate”，选中）；
}
});
$（“#PendingActManagerDomainInformToDate”+v.id）.datepicker({
日期格式：“dd-mm-yy”，
minDate:$（“#PendingActManagerDomainInformFromDate”+v.id）.val（），
onSelect：功能（已选择）{
$（“#PendingActManagerDomainInformFromDate”+v.id）.datepicker（“选项”，“maxDate”，选中）；
}
});
});
})；

This Block Of Code is Under Loop ForEach

html += '<tr>';
    html +='<input type="hidden" name="amdomainpurchasetype[]" value="'+v.domainpurchasetypeid+'" />';

    html +='<td style="text-align:center;">';
        html +='<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group input-group">';
            html +='<span class="input-group-addon"><b>From</b></span>';
            html +='<input data-othervalue="' +v.domainto+ '" id="pendingactmanagerdomainformfromdate' +v.id+ '" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformfromdate" name="actmanagerdomainformfromdate[]" value="'+v.domainfrom+'" type="text" readonly />';
        html +='</div>';
    html +='</td>';

    html +='<td style="text-align:center;">';
        html +='<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group input-group">';
            html +='<span class="input-group-addon"><b>To</b></span>';
            html +='<input data-othervalue="' +v.domainfrom+ '" id="pendingactmanagerdomainformtodate' +v.id+ '" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformtodate" name="actmanagerdomainformtodate[]" value="'+v.domainto+'" type="text" readonly />';
        html +='</div>';
    html +='</td>';
html += '</tr>';

// From date datepicker
$("#pendingactmanagerdomainformfromdate"+v.id).datepicker(
{
        changeMonth:true,
    dateFormat:"yy-mm-dd",
    minDate: new Date(),
    maxDate: $("#pendingactmanagerdomainformtodate"+v.id).val(),
    onSelect: function(selected) {
        $("#pendingactmanagerdomainformtodate"+v.id).datepicker("option", "minDate", selected);
    }
});

// To date datepicker
$("#pendingactmanagerdomainformtodate"+v.id).datepicker(
{
    changeMonth:true,
    dateFormat:"yy-mm-dd",
    minDate: $("#pendingactmanagerdomainformfromdate"+v.id).val(),
    onSelect: function(selected) {
        $("#pendingactmanagerdomainformfromdate"+v.id).datepicker("option", "maxDate", selected);
    }
});