issue with adding datetimepicker in dynamically added table rows

Question

I am working on a project where I am finding difficulty in adding datetimepicker to dynamically added table rows. I have added datetimepicker to static table rows and it is working fine for them but not working for dynamically added table rows.

The tutorial I am following for datetimepicker

https://eonasdan.github.io/bootstrap-datetimepicker/

My Code I tried: I am cloning hidden rows.

Row Clone function:

  // Table Add Function
  $('.table-add').click(function () {

    var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
    hid = $TABLE.find('tr.hide').attr('id');
    // //Assigning every table row a unique ID
    var max=0;
    $('table').find('tr').each(function(){
        var id=parseInt($(this).attr('id'));
        if (id>=max){
           max = id;
         }
     });

     //cloning row with new ID  
     $clone.attr('id', parseInt(max)+1);
     //always assign new id to new table row, will be easy to recognize rows
     $clone.find('input.myinput').attr('id', parseInt(max)+1);

     $clone.find("[name='datepicker']").datetimepicker();
     //$("[name='datepicker']").datetimepicker();

     $hiddentr = $('table').find('tr.hide');

     //add dynamic word picker to cloned rows dynamically
     $clone.find('td:nth-last-child(4)').after('{% if obj.word_picker == "Y" %} <td><input id="wordpicker" style="border:none"; data-role="tagsinput" class="myinput" name="unique_tag"/></td>{% endif %}');
     $clone.appendTo( $('#'+hid).parent());
     //submitting form after row clone
     submitForm();
  });

HTML of hidden td:

<td> 
   <div style="position: relative"> 
     <input class = "form-control" type= "text" name = "datepicker" id= "datetime">
   </div> 
</td> 

Answer 1

Messy but just init datetimepisker each time after you add a row...

$('#datetimepicker1').datetimepicker();

$('#datetimepicker2').datetimepicker();

etc

Answer 2

I was able to initialize the datetimepicker once the element was completely generated into the dom. working codepen

  function addTableRow() {  

  var tbodyElement = document.getElementById("tbody");  
  var trElement = document.createElement("tr");

  trElement.id = "generatedTr";

  for (var x=0; x<3; x++) {
      var tdElement = document.createElement("td");  
      var textNode = document.createTextNode("Generated td: " + x);
      tdElement.appendChild(textNode);      
      trElement.appendChild(tdElement);
  }

  var finalTdElement = document.createElement("td");  
  var inputElement = document.createElement("input");
  inputElement.setAttribute("type", "text");
  inputElement.id = "generatedInput";  
  finalTdElement.appendChild(inputElement);
  trElement.appendChild(finalTdElement);  
  tbodyElement.appendChild(trElement);  

  $('#generatedInput').datetimepicker();
}

If you have multiple elements that are being generated that needs the datetime picker, then I would suggest creating a class on all of them, then simply instantiate the plugin against that class like so.

  $('.dateTimePickers').datetimepicker();

Answer 3

I would suggest don't initialize the datetimepicker every time after each element. better use following code. It will work like a charm.

I have been doing lot of research for this. Thus, Recommending to use Following code.

$('body').on('focus',".datetimepicker", function(){
    $(this).datetimepicker();
});