DatePicker : Cannot set property 'currentDay' of undefined when multiple array id

Question

I've problem with datepicker in dynamic rows table.

• If id of input field inserted index (ex: price_date[0]) it is works.
• If without index (ex : price_date[]) it will create error Cannot set property currentDay of undefined.
• datepicker is show but when click date will show error.
• Only first price_date[] not showing error.

i = parseInt($('#counter').val());
$("#add_row").click(function(){
  $('#addr'+i).html("<td align='right'>"+ (i+1) +"</td>\
<td class='col-xs-2'>\
<input type='text' name='harga_start_date[]' id='harga_start_date[]' class='datepick form-control' >\
</td>");	
  $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
  i++;
});
$("#delete_row").click(function(){
  if(i> 1){
    $("#addr"+(i-1)).html('');
    i--;
  }
});


$(document).on('focus',".datepick", function(){
  $(this).datepicker({
    dateFormat : 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  });
}); 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<table class="table table-striped"  id="tab_logic">
  <thead>
    <tr>
      <td colspan="7">
        <a id="add_row" class="btn btn-success btn-sm pull-left">Add Row</a><a id="delete_row" class="pull-right btn btn-danger btn-sm">Delete Row</a>
      </td>
    </tr>
    <tr class="success">
      <th class="text-center">No.</th>
      <th class="text-center">Start Date</th>
    </tr>
  </thead>
  <tbody >
    <tr id='addr0' class="itemsGroup">
      <td align="right">1
      </td>
      <input type="hidden" name="counter" id="counter" value=1> 
      <td class="col-xs-8">
        <input type="text" name="harga_start_date[]" id="harga_start_date[]" class="datepick form-control" >
      </td>
    </tr>
    <tr id='addr1'></tr>
</table>        

This is the fiddle : https://jsfiddle.net/d4csw1kx/

Answer 1

If I understand the problem correctly, there are 2 things you should change.

1. Remove the ids attribute (You already knew this).
2. This big issue here was that you initialize the plugin in any focus while the plugin itself take care about it.

So the solution is to init any input (the first and the nexts) separately (When the page was loaded and after each adding a row.

i = parseInt($('#counter').val());
$("#add_row").click(function () {
    var addr = $('#addr' + i).html("<td align='right'>" + (i + 1) + "</td>\
                        <td class='col-xs-2'>\
                          <input type='text' name='harga_start_date[]' class='datepick form-control' >\
                        </td>");
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
  attachDatepicker(addr.find('input'));
    i++;
});

$("#delete_row").click(function () {
    if (i > 1) {
        $("#addr" + (i - 1)).html('');
        i--;
    }
});

function attachDatepicker(input) {
  input.datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  });
}

attachDatepicker($('input'));

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />

<table class="table table-striped"  id="tab_logic">
  <thead>
    <tr>
      <td colspan="7">
        <a id="add_row" class="btn btn-success btn-sm pull-left">Add Row</a><a id="delete_row" class="pull-right btn btn-danger btn-sm">Delete Row</a>
      </td>
    </tr>
    <tr class="success">
      <th class="text-center">No.</th>
      <th class="text-center">Start Date</th>
    </tr>
  </thead>
  <tbody >
    <tr id='addr0' class="itemsGroup">
      <td align="right">1
      </td>
      <input type="hidden" name="counter" id="counter" value=1> 
      <td class="col-xs-8">
        <input type="text" name="harga_start_date[]" id="harga_start_date[]" class="datepick form-control" >
      </td>
    </tr>
    <tr id='addr1'></tr>
</table> 

http://jsbin.com/yujeda/edit?html,js