несколько загрузчиков даты на одной странице с расширенной формой

Question

Это может быть старый вопрос, чтобы добавить больше, чем сборщик даты на той же странице. Но у меня здесь другой случай.

использованная библиотека https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Вот скрипт для datepicker

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

теперь несколько date-picker будут отлично работать на той же странице.

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

но второе datepicker здесь происходит от extending формы script

<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", null, ["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>

Когда второй datepicker заполнить, это не сработает. Любая идея.

Answer 1

Это потому, что вы инициируете .datepicker() до того, как вы рендерили второй объект DatePicker.

Может быть попробовать что-то похожее на это:

$(function() {
  $(this).datepicker();
  $('#date').append('<p>Other Date: <input onfocus="dateme(this);" type="text" class="datepicker"></p>')
});

function dateme(x){
  $(x).datepicker();
}

Просто чтобы объяснить, что здесь происходит, я добавляю новый вход DatePicker, который имеет атрибут onfocus="", который вызывает функцию, содержащую функцию .datepicker, когда ввод находится в фокусе.

Codepen Пример: https://codepen.io/lthomas122/pen/XQyOMm

Answer 2

для быстрой изоляции

$('.datepick').each(function(){
    $(this).datepicker({
            keyboardNavigation: false,
            forceParse: false,
            todayHighlight: true
        });
  // apply the rest
}); 

this здесь он будет держать его изолированным