Javascript 动态创建的 HTML table 行的日期比较

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>

我创建了一个动态 Html table（单击按钮时它会向 table 添加行）。在截止日期列中，第二行日期不应小于或等于第一行日期。同样，每个动态添加的行日期都应检查前一行日期。

在 Onchange 事件中，我创建了一个验证来检查第二行日期是否大于上一行日期。我已经尝试过 Date.parse 和 .getTime() 。我的输出是正确的，但仅限于同一个月。例如，如果我在第一行输入 18/09/2019，在第二行输入 11/09/2019，它显示的错误消息是正确的，但是当我输入 11/10/2019 时，它也显示错误。根据我的代码，我认为它唯一的检查日期不是月份或年份。

我已经包含了我的 Jsfiddle Link https://jsfiddle.net/Muthu15/as3t96jr/5/

第二行日期应大于第一行日期，同样，每一行都应检查前一行。

我更新了我的代码 https://jsfiddle.net/Muthu15/ugv0pw93/ 现在它工作正常但我需要比较添加的每一行。就像我添加第三行一样，它应该与第二行进行比较。我使用了多个 if 条件帮助我将其更改为单循环条件。

Answer 1

如评论中所述，您似乎是在比较字符串而不是日期。尝试将您的字符串解析到 Date objects before the comparison. I also highly recommend the MomentJS 库中以帮助处理 JS 中的日期。

Answer 2

希望您不要介意。我对您的 Fiddle 做了一些更改，添加了 MomentJS CDN 并更改了验证，以便可以在日期对象之间进行比较，而不是在 strings 之间进行比较。我认为应该可以解决问题。

https://jsfiddle.net/msn0w46b/

正如他们在上面告诉您的那样，我建议您使用 MomentJS 来处理 Javascript 中的日期。

现在，我认为当您向网格中添加多于两列时会出现问题，因为在代码中可以看出您只比较了前两行。

Javascript 动态创建的 HTML table 行的日期比较

Javascript date comparison for dynamically created HTML table rows

html

javascript

datepicker

date-comparison