動態創建HTML表行的Javascript日期比較

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表格（單擊按鈕會在表格中添加行）。 在到期日列中，第二行日期應不小於或等於第一行日期。 同樣，每個動態添加的行日期都應檢查上一個行日期。

在Onchange事件中，我創建了一個用於檢查第二行日期是否大於上一行日期的驗證。 我已經嘗試過Date.parse和.getTime() 。 我的輸出正確，但僅在同一個月。 例如，如果我在第一行中輸入18/09/2019，在第二行中輸入11/09/2019，則顯示正確的錯誤消息，但是當我輸入11/10/2019時，它也顯示錯誤。 從我的代碼，我認為它的唯一檢查日期不是月份或年份。

我已經包含了我的Jsfiddle鏈接https://jsfiddle.net/Muthu15/as3t96jr/5/

第二行日期應大於第一行日期，並且同樣明智的做法是，每行都應檢查前一行。

我更新了代碼https://jsfiddle.net/Muthu15/ugv0pw93/，現在它可以正常工作，但我需要比較添加的每行。 就像我添加第三行一樣，它應該與第二行進行比較。 我使用多個if條件幫助我將其更改為單循環條件。

Answer 1

如評論中所述，您似乎在比較字符串而不是日期。 嘗試在比較之前將字符串解析為Date對象 。 我也強烈推薦MomentJS庫，以幫助處理JS中的日期。

Answer 2

我希望你不要介意。 我對您的Fiddle進行了一些更改，添加了MomentJS CDN並更改了驗證，以便可以在日期對象而不是strings之間進行比較。 我認為應該可以解決問題。

https://jsfiddle.net/msn0w46b/

正如他們在上面告訴您的那樣，我建議您使用MomentJS在Javascript中處理日期。

現在，我認為您的問題將是當您在網格中添加兩個以上的列時，因為在代碼中，可以看到您僅在比較前兩行。