Создание таблицы в html и javascript, но невозможно использовать Datepicker в столбце даты

Question

Я создаю таблицу в html и javascript, но не могу использовать Datepicker в столбце даты при вставке новой строки, но она работает при использовании в обычном html коде

Здесь это javascript функция: -

//Script for claendar 
$(function () {
        $('.pickadate').datepicker({
            format: "dd/mm/yyyy",
            autoclose: true,
            todayHighlight: true,
            showOtherMonths: true,
            selectOtherMonths: true,
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            orientation: "button"
        });
    });

Вот код html, в котором работает средство выбора даты: -

 <div class='input-group date pickadate'>
       <input type='text'/>
       <span class="input-group-addon">
           <span class="glyphicon glyphicon-calendar"></span>
       </span>
 </div>

Вот код для вставки новой строки в который средство выбора даты не работает

//Inserting new row
$(document).on('click', '.btn_new_row', function(event) 
{
    event.preventDefault();
    //create a random id
    var row_id = Math.random().toString(36).substr(2);

    var user_id = <?php echo $user_id; ?>

    //get table rows
    var tbl_row = $(document).find('.tbl_code_with_mark').find('tr');    
    var tbl = '';
    tbl +='<tr row_id="'+row_id+'", user_id="'+user_id+'">';
        tbl +='<td ><div class="pickadate new_row_data date editinfo" contenteditable="true" edit_type="click" col_name="date"></div></td>';
        tbl +='<td ><div class="new_row_data purpose editinfo" contenteditable="true" edit_type="click" col_name="purpose"></div></td>';
        tbl +='<td ><div class="new_row_data category editinfo" contenteditable="true" edit_type="click" col_name="category"></div></td>';
        tbl +='<td ><div class="new_row_data sum editinfo" contenteditable="true" edit_type="click" col_name="sum"></div></td>';

        //--->edit options > start
        tbl +='<td>';            
            tbl +='  <a href="#" class="btn btn-link btn_new" row_id="'+row_id+'" > Add Entry</a>   | ';
            tbl +='  <a href="#" class="btn btn-link btn_remove_new_entry" row_id="'+row_id+'"> Remove</a> ';
        tbl +='</td>';
        //--->edit options > end    

    tbl +='</tr>';
    tbl_row.first().after(tbl);

    $(document).find('.tbl_code_with_mark').find('tr').first().find('.purpose').focus();
});

Я включил имя класса 'pickadate' в ячейку даты, но он не работает.

Answer 1

Вы должны обернуть инициацию DatePicker с помощью функции:

function initDatePicker(selector) {
    $(selector).datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
        todayHighlight: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        autoclose: true,
        changeMonth: true,
        changeYear: true,
        orientation: "button"
    });
}

и вызывать ее после добавления html в DOM, отправляя требуемый ввод DatePicker в качестве параметра.

initDatePicker("#my_new_date_picker_id");

Answer 2

Проблема

Потому что, Вы инициализируете datepicker только один раз после загрузки страницы.

Это означает, что это строка $('.pickadate').datepicker({...}), которая преобразует ввод даты по умолчанию в datepicker. Вы запускаете это при загрузке страницы, поэтому он преобразует элементы, существующие при загрузке страницы. После добавления новой строки Вы не звоните datepicker({..}), поэтому он не будет идентифицировать новый элемент.

Решение

// create a function
function initPicker() {
        $('.pickadate').datepicker({
            format: "dd/mm/yyyy",
            autoclose: true,
            todayHighlight: true,
            showOtherMonths: true,
            selectOtherMonths: true,
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            orientation: "button"
        });
});

//Inserting new row
$(document).on('click', '.btn_new_row', function(event) 
{
    event.preventDefault();
    //create a random id
    var row_id = Math.random().toString(36).substr(2);

    /**
     All your code here...
    **/

    $(document).find('.tbl_code_with_mark').find('tr').first().find('.purpose').focus();


    initPicker(); // re-initializing the pickers (after add your row)

});


initPicker(); // trigger on page load (default)