Multiple Dynamic Jquery Datepicker with separate min max date dependency

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

After each iteration html is rendered to div using .html(html)

After .html(html)

Loop continue following code for making 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);
    }
});

After loop complete it showing all fields

But only making last input as datepicker :( not every field which I required

No error on console showing

All values coming are present, valid and checked

Dynamic ids can also be seen in html source, but for example if 4 datepicker(2 from datepicker, 2 to datepicker) it only showing for last one

Can anyone suggest what is the possible issue here?

Example situation created on jsfiddle http://jsfiddle.net/6akt0pe3/3/

Answer 1

In your current jquery code you are using .html() this will remove all previous htmls and add new htmls to your dom . So ,html variable has tr inside it but on each iteration you remove previous html and add new because of this datepicker doesn't find input which it need to initialize as on each iteration v.id value also gets changed .So , instead remove all .html() code and use .append().

Demo Code :

$(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>