基于开始日期的结束日期使用 Jquery Datepicker 在通过 class 调用时无法动态工作

Question

想使用 Jquery 根据开始日期设置结束日期，下面的日期选择器是它的代码并且有效

 $(".startdate").datepicker({
    //dateFormat: 'dd/mm/yy',
    minDate: new Date(),
    onSelect: function (dateStr) {
        debugger;
        var selectedDate = new Date(dateStr);
        var msecsInADay = 86400000;
        var dayless = new Date(selectedDate.getTime() + msecsInADay);
        var endDate = $(this).parents('tr').find('.enddate');
        //        $(endDate).datepicker('option', 'defaultDate', dayless);
        $(endDate).datepicker('option', 'minDate', dayless);
    }
});
$(".enddate").datepicker({
    //dateFormat: 'dd/mm/yy',
    minDate: new Date()
});

但是当使用相同的 class 调用它时它不会动态工作，同时通过下面的行输入附加到 table 是代码

var counter = 1;
$(".add-newrow").click(function () {
    event.preventDefault();
     counter++;
var newRow = $('<tr><td><input type="text" name="year_name" class="form-
control"' +   counter + '"/></td><td><input type="text" name="start_name" 
class="form-control startdate"' +
counter + '"/></td><td><input type="text" name="end_name" class="form-
control enddate"' + counter + '"/></td></tr>');

$('.academictable').append(newRow);

});

HTML 是这样吗我有一个 table 当我点击添加时添加了新行并且日期选择器和所有内容都需要应用到添加到 table 的每一行.这是一个bootstrap格式。

<div class="row">
            <table class="table table-responsive table-bordered academictable" id="academictable">
                <thead>
                    <tr>
                        <th>Year name</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Status</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#" class="a1">2017-2018</a></td>
                        <td><input type="text" id="pickup_date" class="form-control startdate"/></td>
                        <td><input type="text" id="dropoff_date" class="form-control enddate" onfocus="setupenddate(this);"/></td>
                        <td>Active</td>

                    <tr>
                        <td><a href="#" class="a1">2018-2019</a></td>
                        <td><input type="text" id="" class="form-control startdate"  /></td>
                        <td><input type="text" id="" class="form-control enddate" /></td>
                        <td>Active</td>

                    </tr>
                    <tr>
                        <td><a href="#" class="a1">2019-2020</a></td>
                        <td><input type="text" id="" class="form-control startdate" on/></td>
                        <td><input type="text" id="" class="form-control enddate"/></td>
                        <td>Active</td>

                    </tr>
                    <tr>
                        <td><a href="#" class="a1">2021-2022</a></td>
                        <td><input type="text" id="" class="form-control startdate" /></td>
                        <td><input type="text" id="" class="form-control enddate"/></td>
                        <td>Active</td>

                    </tr>
                    <tr>
                        <td><a href="#" class="a1">2022-2023</a></td>
                        <td><input type="text" id="" class="form-control startdate" /></td>
                        <td><input type="text" id="" class="form-control enddate"/></td>
                        <td>Active</td>

                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row pull-right">
            <input type="button" name="add" value="Add" id="add-newrow" class="btn btn-default add-newrow" />
            <input type="reset" name="cancel" value="Cancel" class="btn btn-default" />
        </div>

Answer 1

再次启动您的日期选择器请立即检查它是否可以帮助您更好

var counter = 1;
$(".add-newrow").click(function () {
    event.preventDefault();
     counter++;
var newRow = $('<tr><td><input type="text" name="year_name" class="form-
control"' +   counter + '"/></td><td><input type="text" name="start_name" 
class="form-control startdate"' +
counter + '"/></td><td><input type="text" name="end_name" class="form-
control enddate"' + counter + '"/></td></tr>');

$('.academictable').append(newRow);

$(".startdate").datepicker({
    //dateFormat: 'dd/mm/yy',
    minDate: new Date(),
    onSelect: function (dateStr) {
        debugger;
        var selectedDate = new Date(dateStr);
        var msecsInADay = 86400000;
        var dayless = new Date(selectedDate.getTime() + msecsInADay);
        var endDate = $(this).parents('tr').find('.enddate');
        //        $(endDate).datepicker('option', 'defaultDate', dayless);
        $(endDate).datepicker('option', 'minDate', dayless);
    }
});
$(".enddate").datepicker({
    //dateFormat: 'dd/mm/yy',
    minDate: new Date()
});


});

基于开始日期的结束日期使用 Jquery Datepicker 在通过 class 调用时无法动态工作

End date based on start date using Jquery Datepicker not working dynamically when it is called through the class

html

javascript

jquery

datepicker

jquery-plugins