在同一页面上添加更多的日期选择器可能是一个古老的问题.但是我这里有另外一种情况.

二手图书馆
 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

这是日期选择器的脚本

<script>
        $(document).ready(function () {
            $('.datepicker').datepicker({
                keyboardNavigation: false,forceParse: false,todayHighlight: true
            });
        });
    </script>

现在,多个日期选择器可以在同一页面上正常工作.

{!! Form::text('expiry_date',null,['data-format'=>'D,dd MM yyyy','class'=>'form-control datepicker','placeholder'=>'yyyy-mm-dd']) !!}
{!! Form::text('expiry_date','placeholder'=>'yyyy-mm-dd']) !!}

但是这里的第二个日期选择器来自扩展表单脚本

<script>
        let counter = 1;
        let limit = 10;

        function addInput(divName) {
            if (counter === limit) {
                alert("You have reached the limit of adding " + counter + " inputs");
            } else {
                let newdiv = document.createElement('div');
                newdiv.innerHTML = '<div class = "col-md-12"> <h4>Package ' + (counter + 1) + ' </h4> ...<div class="col-sm-6"><div class="form-group"><div id="date-popup2" class="input-group date">{!! Form::text("expiry_date",["data-format"=>"D,dd MM yyyy","class"=>"form-control datepicker","placeholder"=>"yyyy-mm-dd"]) !!}<span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div>...';
                document.getElementById(divName).appendChild(newdiv);
                counter++;
            }
        }
    </script>

当第二个日期选择器填充时,它不起作用.任何想法.