How to add datepicker in dynamically created string

Question

I was stuck in the request and did not work. I created several text input fields in the table row and one button to add a new line with the same text input fields when we click the button add Row.

Here is the code:

<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">

Here is the jQuery code to add a new line when we click the add button

 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;

        }
      }
    }

I use jQuery-ui datepickerto select a date from a text box. Here datepickercode

$('.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 . initialize datepicker , , datepicker .

, , datepicker, datepicker .

. .

.. rows datepicker, row, selected date top most row ( ), . .

, .

Answer 3

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
});

Answer 4

js- :

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

Answer 5

: , .!