как добавить datepicker в динамически созданной строке

Question

Я застреваю в запросе и его не работает. Я создал несколько текстовых полей ввода в строке таблицы и одной кнопки, чтобы добавить новую строку с одинаковыми текстовыми полями ввода, когда мы нажимаем кнопку add Row.

Вот код:

<table> 
<tr> 
<td><input type="text" name="assigned_date[]" value="" id="assigned_date" class="assigned_date" /> 
    <span class="text-danger"><?php echo form_error('assigned_date[]');?></span> 
</td> 
<td><input type="text" name="last_date[]" value="" id="last_date" class="last_date" /> 
    <span class="text-danger"><?php echo form_error('last_date[]');?></span> 
</td> 
<td><input type="text" name="priority[]" value="" /> 
    <span class="text-danger"><?php echo form_error('priority[]');?></span> 
</td> 
<td><input type="text" name="frequency[]" value="" /> 
    <span class="text-danger"><?php echo form_error('frequency[]');?></span> 
</td> 
</tr> 
</table> 
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" /> 
<input class="btn btn-primary" type="submit" name="submit" value="submit"> 

Вот код JQuery, чтобы добавить новую строку, когда мы нажимаем на кнопку добавления

function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[1].cells.length; 

     for(var i=0; i<colCount; i++) { 

     var newcell = row.insertCell(i); 

     newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
     //alert(newcell.childNodes); 
     switch(newcell.childNodes[0].type) { 
      case "text": 
       newcell.childNodes[0].value = ""; 
       break; 
      case "checkbox": 
       newcell.childNodes[0].checked = false; 
       break; 
      case "select-one": 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 

     } 
     } 
    } 

Я использую jQuery-ui datepicker, чтобы выбрать дату из текстового поля. Вот datepicker кода

$('.assigned_date').each(function(){ 
    $('.assigned_date').removeClass('hasDatepicker').datepicker(); 
}); 

Когда я нажимаю первое текстовое поле, которое не создается динамически, то это показывает календарь и выбрать дату. Но проблема в том, что я нажимаю кнопку добавления и создаю ту же строку, а затем, если я выберу текстовое поле, тогда он не покажет никакого календаря. как я могу решить эту проблему. Пожалуйста, помогите найти решение. Когда я вижу на инспектировать элемент, то он показывает имя класса с hasDatepicker

Здесь создаются [скрипка] [1] см

https://jsfiddle.net/r83vmv1q/3/

Answer 1

@ M.Tanzil: В вашем коде есть ошибка.

1) Сначала выберите дату в первой подборке даты.

2) Затем добавьте новую строку.

3) Затем выберите дату во втором ряду.

Вторая выбранная дата будет добавлена ​​в первую строку.

Я исправил эту проблему. Проблема возникает из-за того, что у всех датпикеров одинаковый идентификатор. Я назначил динамический идентификатор для datepickers.

Пожалуйста, проверьте это Fiddle.

Answer 2

У вас есть много ошибок в вашем javascript коды скрипку, которую вы предоставили. Также у вас должно быть initializedatepicker после функций, которые создают входы, которые вы хотите связать datepicker с.

Кроме того, когда вы добавляете строку, уничтожить все экземпляры Datepicker, а затем пересвязать datepicker после добавления новой строки.

Пожалуйста, смотрите modified Fiddle свою работу.

ПРИМЕЧАНИЕ: Все вновь созданные rows и входы внутри будет отображаться datepicker но при выборе даты в любом из row в selected date будет отображаться в top most row (если входы, имеющие одни и те же классы), так что у вас есть чтобы справиться с этим. Попробуйте использовать разные классы или с уникальными идентификаторами.

Надеюсь, это поможет.

Answer 3

вы должны проверить свой код JS, и почему вы не пытаетесь использовать дату ввода типа:

[<input type="date">][1] 

Answer 4

как совет: быть уверенным, что вы выберите дату из текстового поля после создания новый элемент.!

Answer 5

удалите идентификаторы assign_date и last_date при создании строк из javascript, это правило не должно повторяться в html.

использование ниже кода

<table> 
<tr> 
<td><input type="text" name="assigned_date[]" value="" class="assigned_date datetimepick" /> 
    <span class="text-danger"><?php echo form_error('assigned_date[]');?></span> 
</td> 
<td><input type="text" name="last_date[]" value="" class="last_date datetimepick" /> 
    <span class="text-danger"><?php echo form_error('last_date[]');?></span> 
</td> 
<td><input type="text" name="priority[]" value="" /> 
    <span class="text-danger"><?php echo form_error('priority[]');?></span> 
</td> 
<td><input type="text" name="frequency[]" value="" /> 
    <span class="text-danger"><?php echo form_error('frequency[]');?></span> 
</td> 
</tr> 
</table> 
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" /> 
<input class="btn btn-primary" type="submit" name="submit" value="submit"> 

и если вы используете DateTimePicker использование инициализации ниже класса в качестве идентификатора

$('.datetimepick').datetimepicker({ 
    format:"Y-m-d H:i", 
    timepickerScrollbar:false, 
    minDate: 0 
});