如何通过Jquery minDate＆amp ;;验证动态添加的Date字段的maxDate

Question

我有两个日期输入字段开始日期＆amp;结束日期，结束日期必须大于开始日期。我已经使用Jquery minDate＆amp; maxDate.But当我动态插入这两个日期字段时，我该如何验证这些动态添加的日期字段。

＆＃13;

＆＃13;

$(function() {
	// Check the date range, 86400000 is the number of milliseconds in one day

    $("#start_date").datepicker({ 
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function(selected) {          
           $("#end_date").datepicker("option","minDate", selected)
        }
    });

    $("#end_date").datepicker({ 
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
		    minDate: $("#start_date").val(),
        onSelect: function(selected) {
          $("#start_date").datepicker("option","maxDate", selected)
        }

    });	

});

＆＃13;

    table, th, td {
      border: 1px solid black;
    }
    table {
        border-collapse: collapse;
    }

    table, th, td {
        border: 1px solid black;
    }  
    th, td {
        padding: 15px;
        text-align: left;
    } 
    tr:hover {background-color: #f5f5f5}    
    th {
        background-color: #4CAF50;
        color: white;
    }    

    input {
       padding: 15px;
    } 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<table border="1" cellspacing="5">
    <tbody>
        <tr>
            <th>Start Date</th>
            <td><input type="text" id="start_date" value=""></td>
            <th>End Date</th>
            <td><input type="text" id="end_date" value=""></td>            
        </tr>
    </tobdy>
 </table>

＆＃13;

＆＃13;

＆＃13;

工作正常。

＆＃13;

＆＃13;

$(function() {

    $(".datepicker_class").datepicker({ 
        dateFormat: "dd-mm-yy",
        changeMonth: true,
        changeYear: true,
    }); 


    $(document).on('click', "#addMoreBtn", function () {

          var add_more_str =
                "<tr>" 
              + "<th>Start Date</th>"
              + " <td><input type=\"text\" class=\"start_date_class datepicker_class\" value=\"\"></td>"
              + "<th>End Date</th>"
              + "<td><input type=\"text\" class=\"end_date_class datepicker_class\"  value=\"\"></td>"
              + "</tr>";
        
        $( add_more_str ).insertBefore( "tbody .add_more" );     
                
        $( ".datepicker_class" ).datepicker({                      
          dateFormat: "dd-mm-yy",                 
          changeMonth: true,
          changeYear: true
        });    
      
    });

});

＆＃13;

    table, th, td {
      border: 1px solid black;
    }
    table {
        border-collapse: collapse;
    }

    table, th, td {
        border: 1px solid black;
    }  
    th, td {
        padding: 15px;
        text-align: left;
    } 
    tr:hover {background-color: #f5f5f5}    
    th {
        background-color: #4CAF50;
        color: white;
    }    

    input {
       padding: 15px;
    }     

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<table border="1" cellspacing="5">
    <tbody>
        <tr id="first_date_input">
            <th>Start Date</th>
            <td><input type="text" class="start_date_class datepicker_class" value=""></td>
            <th>End Date</th>
            <td><input type="text" class="end_date_class datepicker_class"  value=""></td>
        </tr>
         
        <tr class="add_more">
            <td colspan="4"><a href="#" id="addMoreBtn">Add More</a></td>
        </tr>        
    </tbody>
 </table>

＆＃13;

＆＃13;

＆＃13;

如何验证此动态添加的日期字段。

Answer 1

您可以通过动态地为您的日期选择器分配渐进id来解决您的问题，然后应用您在第一个示例中使用的相同逻辑：

$(document).on('click', "#addMoreBtn", function () {
    var len = ($(".datepicker_class").length / 2) + 1;

    var add_more_str =
        "<tr>" 
      + "<th>Start Date</th>"
      + " <td><input id=\"start_date_"+len+"\" type=\"text\" class=\"start_date_class datepicker_class\" value=\"\"></td>"
      + "<th>End Date</th>"
      + "<td><input id=\"end_date_"+len+"\" type=\"text\" class=\"end_date_class datepicker_class\"  value=\"\"></td>"
      + "</tr>";

    $( add_more_str ).insertBefore( "tbody .add_more" );

    $( "#start_date_"+len ).datepicker({                      
        dateFormat: "dd-mm-yy",                 
        changeMonth: true,
        changeYear: true,
        onSelect: function(selected) {          
           $("#end_date_"+len).datepicker("option","minDate", selected)
        }
    });

    $( "#end_date_"+len ).datepicker({                      
        dateFormat: "dd-mm-yy",                 
        changeMonth: true,
        changeYear: true,
        onSelect: function(selected) {          
           $("#start_date_"+len).datepicker("option","maxDate", selected)
        }
    });
});