Using Bootstrap Datepicker In The Created Table Rows

I'm creating a data grip for a project and I need to use Bootstrap Datepicker to the Date field. The problem is that in the table only the first row (that is previously created) ha

Solution 1:

try to leverage jquery to speed coding up and then you end up with like,, 4-5 lines of code to do what you need :)

cheers,

$('.dateP').datetimepicker();

$('.dupli').on( 'click', function(e){
  var dup = $('.cpy').first().clone();
  $('.table').append( dup );
  $('.dateP').datetimepicker();
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css"rel="stylesheet"/><tableclass="table table-striped"><tr><th>Event name</th><th>Date:</th><td><buttontype="submit"class="btn btn-default dupli">+</button></td></tr><trclass="cpy"><td><inputtype="text"class="form-control"id="e1"></td><td><divclass='input-group dateP'><inputtype='text'class="form-control" /><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div></td></tr></table>