Javascript date comparison for dynamically created HTML table rows

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table cellspacing="3" cellpadding="3" id="data_table" width="50%">
  <thead>
    <tr>
      <th width="30%">Due date</th>
      <th width="26%">Amount Due</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="addPurchaseItem">
    <tr>
      <td width="30%">
        <input type="text" tabindex="1" id="Text1" autocomplete="off" class="datectrl" name="due_date[]" placeholder="Due Date" runat="server" />
      </td>
      <td width="25%">
        <input type="text" runat="server" id="new_Amount_1" placeholder="0.00" autocomplete="off" clientidmode="Static" name="new_Amount[]" />
      </td>
      <td>
        <input type="button" onclick="return delete_row(this)" value="Delete" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <input type="button" onclick="add_row('addPurchaseItem');" value="Add Credit Period" id="btnAddCrdPrd" name="addbtnAddCrdPrd" />
      </td>
    </tr>
  </tfoot>
</table>

<script type="text/javascript">
  $(document).ready(function() {
    $(".datectrl").datepicker({
      dateFormat: 'dd/mm/yy',      
      showOn: 'focus'
    });
  });
</script>

<script type="text/javascript">
  var count = 2;
  var limits = 500;

  function add_row(divName) {

    if (count == limits) {
      alert("You have reached the limit of adding " + count + "inputs ");
    } else {
      var newdiv = document.createElement('tr');
      var tabin = "new_due_" + count;
      tabindex = count * 1,
        tab1 = tabindex + 1;
      tab2 = tabindex + 2;
      newdiv.innerHTML = '<td><input type="text" onchange="dateValidation()" name ="due_date[]" id = "new_due_' + count + '" class="datectrl" autocomplete="off" tabindex = "' + tab1 + '"  placeholder = "Due date" /> </td > <td> <input type="text" id="new_Amount_' + count + '" tabindex="' + tab1 + '" placeholder="0.00" autocomplete="off" name="new_Amount[]" /> </td><td> <input type="button" value="Delete" onclick="delete_row(this)" tabindex="' + tab2 + '"></input></td > ';
      document.getElementById(divName).appendChild(newdiv);
      document.getElementById(tabin).focus();
      count++;
      $(".datectrl").datepicker({
        dateFormat: "dd/mm/yy"
      });
      $(".datectrl").focus();
    }
  }

  function delete_row(no) {
    var i = no.parentNode.parentNode.rowIndex;
    if (i == "1") {
      alert("Can't Delete Row");
      return false;
    } else {
      document.getElementById("data_table").deleteRow(i);
    }
  }

</script>

<script type="text/javascript">
  function dateValidation() {
    $(function() {
      $("[id*=data_table] tbody ").each(function() {

        if ($(this).find('tr:eq(1) td:eq(0) input').val() <= $(this).find('tr:eq(0) td:eq(0) input').val()) {
          alert("Due date should be greater than previous due date");
          $(this).find('tr:eq(1) td:eq(0) input').val('');
          return false;
        }
        return true;
      });
    });
  }

</script>

I have created a dynamic Html table(on button click it will add rows to the table). In due date column second row date should not be less than or equal to first row date. Like wise every dynamically added row date should check previous row date.

In Onchange event I created a validation for checking second row date is greater than previous row date. I have already tried Date.parse and .getTime() . I'm getting output correct but only for same month. For example if I enter 18/09/2019 in first row and 11/09/2019 in second row it showing error message that's correct but when I enter 11/10/2019 also it showing error. From my code I think its only checking date not month or year.

I have included my Jsfiddle Link https://jsfiddle.net/Muthu15/as3t96jr/5/

Second row date should be greater than first row date and like wise every row should check previous row.

I updated my code https://jsfiddle.net/Muthu15/ugv0pw93/ now its working fine but I need to compare every rows which added. Like if I add third row it should compare with second row. I used multiple if conditions help me with that change that into single loop conditon.

Answer 1

I hope you don't mind. I did some changes to your Fiddle, I added a MomentJS CDN and I change the validation so that the comparison can be made between date objects instead of strings. I think that should do the trick.

https://jsfiddle.net/msn0w46b/

As they told you above, I suggest you use MomentJS to work with dates in Javascript.

Now, I think that your problem will be when you add more than two columns to your grid since in in the code, it can be seen that you're only comparing the first two rows.