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=".11.3.min.js"></script>
<script type="text/javascript" src=".11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href=".3.6/css/bootstrap.min.css" />
<script type="text/javascript" src=".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>        

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

• javascript
• php
• jquery
• html
• datepicker

• 2 Wele to SO. None of your text in the question matches the code you provided. Please create a real example using the code snippet editor or jsFiddle – mplungjan Commented Dec 31, 2015 at 7:01
• i'm already update with fiddle link , second row update the first row after click – reefman Commented Dec 31, 2015 at 7:20

1 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./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery./ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./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./yujeda/edit?html,js