Question

想要根据开始日期设置结束日期，使用下面的Jquery Datepicker是它的代码并且可以正常工作

 $(".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()
});

但是当它通过下面的行输入追加到表时使用相同的类调用它时它是不动的是代码

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就是这个我有一个表，当我点击添加新行添加和日期选择器，一切都需要应用到添加到表的每一行。这是一种自助形式。

<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在通过类调用时不动态

1 个答案: