JQuery Выбор даты не работает в Dynami c Форма ввода в Laravel

Question

У меня есть код в Laravel -5.8, используя JQuery Datepicker. Приложение представляет собой форму ввода Dynami c, которая при нажатии кнопки добавления (+) добавляет массив элементов управления.

<table class="table table-bordered">
 <thead>
   <tr>
     <th scope="col">Start Date<span style="color:red;">*</span></th>
     <th scope="col">End Date<span style="color:red;">*</span></th>
     <th scope="col" width="8%"><a class="btn btn-info addRow"><i class="fa fa-plus"></i></a></th>
   </tr>
 </thead>

 <tbody>
    <td>
       <input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control">
    </td>
    <td>
       <input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control">
    </td>
 </tbody>
 </thead>
</table>


<script src="{{ asset('theme/adminlte3/plugins/jquery/jquery.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('theme/adminlte3/plugins/jquery-ui/jquery-ui.js') }}"></script>

<script type="text/javascript">
        $(function () {
            $( "#startDate" ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,     
                showAnim: 'slideDown',
                duration: 'fast',                    
                yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),

            });
            
            $( "#endDate" ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,     
                showAnim: 'slideDown',
                duration: 'fast',                    
                yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
            });                
     });
</script>       

   <script type="text/javascript">
    $(document).ready(function(){
        $('.addRow').on('click', function () {
   var isHod = {{ Auth::user()->is_hod == 0 ? 0 : 1 }};
    var numRows = $('.activity').length

    if (numRows<4) {
        addRow();
    }
        });

        function addRow() {
            var addRow = '<tr>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control"></div></td>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control"></div></td>\n' +
' <td><a   class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>\n' +
' </tr>';
            $('tbody').append(addRow);
            addRemoveListener();
        };
    addRemoveListener();
});

function addRemoveListener() {
$('.remove').on('click', function () {
        var l =$('tbody tr').length;
        if(l==1){
            alert('you cant delete last one')
        }else{

            $(this).parent().parent().remove();

        }

    });
 }

</script>

Датпикер по умолчанию JQuery работает нормально. Но когда я щелкнул Добавить новый (+), чтобы добавить новые в массив. Когда я нажимаю на start_date и end_date, дата не наступает.

Как решить эту проблему?

Answer 1

Проблема в том, как вы инициализируете свой datepicker.

Вы используете анонимную функцию для регистрации datepicker

$(function () {
        $( "#startDate" ).datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,     
            showAnim: 'slideDown',
            duration: 'fast',                    
            yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),

        });
        
        // ...            
 });

, которая работает для элементов, которые уже существуют на странице, когда функция работает, но вы динамически добавляете элементы на страницу после инициализации, поэтому datepicker не будет там регистрироваться.

Вы можете узнать, как зарегистрировать datepicker для динамически добавляемых элементов в этом ответе SO: { ссылка }

- РЕДАКТИРОВАТЬ

В вашем случае первое, что вам нужно сделать, это удалить идентификаторы start_date и end_date и вместо этого добавить что-то вроде теги данных, так как добавление одного и того же идентификатора несколько раз к одной и той же странице не допускается.

Таким образом, вы можете изменить код для добавления новых строк (обратите внимание на data-datepicker" на входах):

    function addRow() {
            var addRow = '<tr>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input  type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control" data-datepicker></div></td>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input  type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control" data-datepicker></div></td>\n' +
' <td><a   class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>\n' +
' </tr>';
            $('tbody').append(addRow);
            addRemoveListener();
        };

Вам также следует изменить часть id= в вашем html на data-datepicker.

Теперь у вас есть способ универсально настроить таргетинг на компоненты, которые должны запускать ваш datepicker, так что y Вы можете изменить свою функцию инициализации на

$(function () {
        $('body').on('focus',"[data-datepicker]", function(){
                 $(this).datepicker({
                         dateFormat: 'dd-mm-yy',
                         changeMonth: true,
                         changeYear: true,     
                         showAnim: 'slideDown',
                         duration: 'fast',                    
                         yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
                 });
        });​           
 });

Объяснение:

Теперь мы регистрируем глобальный прослушиватель событий на объекте body, который прослушивает событие focus, которое запускается, когда вы введите что-то вроде ввода текста. Второй параметр функции on позволяет нам фильтровать только те элементы, которые нас интересуют. В вашем случае элементы с атрибутом data-datepicker. Затем мы инициализируем datepicker для этого объекта.

Вы можете прочитать все о функции on в jQuery документации https://api.jquery.com/on/