您必须重新初始化
datepicker
动态添加时
元素。
下面是如何添加它。
$('#'+element1.id).datepicker();
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "minenddate" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
$('#' + element1.id).datepicker(); //add this line to initialize
rowCount = parseInt(rowCount) + 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {
count = document.getElementById("minsize").value;
i = 0;
dateId = "datepicker2";
for (i = 0; i <= (count + 1); i++) {
dateId = "#datepicker2" + i;
$(dateId).datepicker();
}
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/js/jquery.dataTables.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Date</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='datepicker20' value="2018-08-09" class="form-control" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
