具有单独的最小最大日期依赖性的多个动态 Jquery 日期选择器

Question

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>';

每次迭代 html 使用 .html(html)

渲染到 div

.html(html)

之后

循环继续下面的代码制作datepicker()

// 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);
    }
});

循环完成后显示所有字段

但只将最后一个输入作为日期选择器 :(不是我需要的每个字段

没有错误在控制台显示

所有传入的值都存在、有效并经过检查

动态 id 也可以在 html 源代码中看到，但例如如果 4 个 datepicker（2 个来自 datepicker，2 个到 datepicker）它只显示最后一个

谁能建议这里可能出现的问题？

在 jsfiddle 上创建的示例情况 http://jsfiddle.net/6akt0pe3/3/

Answer 1

在您当前使用的 jquery 代码中，您正在使用 .html() 这将删除所有以前的 html 并将新的 html 添加到您的 dom 中。所以，html 变量里面有tr，但是在每次迭代中，你删除以前的html并添加新的，因为datepicker没有找到需要初始化的输入，因为每次迭代v.id值也会改变.所以，改为删除所有.html() 代码并使用.append()。

演示代码：

$(function() {
  data = [{
      id: 1,
      datefrom: "22-06-2021",
      dateto: "22-07-2021"
    },
    {
      id: 2,
      datefrom: "15-07-2021",
      dateto: "15-08-2020"
    },
    {
      id: 3,
      datefrom: "12-06-2021",
      dateto: "12-07-2021"
    },
    {
      id: 4,
      datefrom: "17-06-2021",
      dateto: "17-07-2021"
    }
  ];
   $("#div").html("")
  $(data).each(function(i, v) {
  //use append..here
    $("#div").append(`<tr><td><input data-othervalue="${v.id}" id="pendingactmanagerdomainformfromdate${v.id}" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformfromdate" name="actmanagerdomainformfromdate[]" value="${v.datefrom}" type="text" readonly /></td><td><input data-othervalue="${v.id}" id="pendingactmanagerdomainformtodate${v.id}" tabindex="3" required class="form-control input-lg pendingactmanagerdomainformfromdate" name="actmanagerdomainformfromdate[]" value="${v.dateto}" type="text" readonly /></td></tr>`)
//then access inputs..
    $('#pendingactmanagerdomainformfromdate' + v.id).datepicker({
      dateFormat: 'dd-mm-yy',
      minDate: new Date(),
      maxDate: $("#pendingactmanagerdomainformtodate" + v.id).val(),
      onSelect: function(selected) {
        $("#pendingactmanagerdomainformtodate" + v.id).datepicker("option", "minDate", selected);
      }
    });
    $('#pendingactmanagerdomainformtodate' + v.id).datepicker({
      dateFormat: 'dd-mm-yy',
      minDate: $("#pendingactmanagerdomainformfromdate" + v.id).val(),
      onSelect: function(selected) {
        $("#pendingactmanagerdomainformfromdate" + v.id).datepicker("option", "maxDate", selected);
      }
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="div">
</div>