我在动态行表中使用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/
如果我正确理解问题,则必须更改2件事。
id
s属性(您已经知道这一点)。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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句