У меня проблема с datepicker в таблице динамических строк.
price_date[0] ), он работает. price_date[] ), он создаст ошибку. Невозможно установить свойство currentDay неопределенного. datepicker отображается, но когда дата клика покажет ошибку. price_date[] не показывает ошибку. 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>
Это скрипка: https://jsfiddle.net/d4csw1kx/
Если я правильно понимаю проблему, то вам нужно изменить две вещи.
id (вы уже это знали). focus то время как сам плагин позаботится об этом. Таким образом, решение состоит в том, чтобы инициализировать любой вход (первый и следующий) отдельно (когда страница была загружена и после каждого добавления строки.
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>