我正在做一个项目，因为它需要动态生成html元素，一个是日期选择器，另一个是时间范围，每当我单击添加行进行日期选择器和多个时间范围。 谁能帮我怎么做？
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12"> </div>
<div class="col-md-12"> </div>
<div id="date-selection">
<div class="row" id="date_count_0">
<div class="col-md-12"> </div>
<div class="col-md-11">
<input type="text" name="date[0]" value="" class="form-control datepicker"/>
</div>
<div class="col-md-1" style="text-align: right;">
<a href="javascript:void(0);" class="btn btn-info" id="add_date"><i class="fa fa-plus"></i></a>
</div>
<div class="col-md-12"> </div>
<div class="col-md-12"> </div>
<div class="timing-selection_0">
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<input type="text" name="dat[0][from]" value="" class="form-control time-picker" />
</div>
<div class="col-md-5">
<input type="text" name="dat[0][to]" value="" class="form-control time-picker" />
</div>
<div class="col-md-2" style="text-align: right;">
<a href="javascript:void(0);" class="btn btn-info add_timings" id="add_timings_0" data-id="0" onclick="add_timings(this)">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var date_count = 1;
var time_count = 1;
function add_timings(attr){
var thisid = $(attr).data("id");
var inner_timings = "<div id='delete_timing_" + time_count + "'><div class='col-md-12'> </div>" +
"<div class='col-md-12'>" +
"<div class='row'>" +
"<div class='col-md-5'>" +
"<input type='text' name='dat[" + thisid + "][from]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-5'>" +
"<input type='text' name='dat[" + thisid + "][to]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-2' style='text-align: right;'>" +
"<a href='javascript:void(0);' class='btn btn-info add_timings' id='add_timings_" + time_count + "' onclick='deletetimings(" + time_count + ")'>" +
"<i class='fa fa-minus'></i>" +
"</a> " +
"</div>" +
"</div>" +
"</div>" +
"</div>";
$(".timing-selection_" + thisid).append(inner_timings);
$('.time-picker').timepicker({
template: false,
showInputs: false,
minuteStep: 5
});
time_count++;
}
$("#add_date").on("click", function (row, index) {
var texttoappend = "<div id='delete_row_" + date_count + "'>" +
"<div class='row'>" +
"<div class='col-md-12'> </div>" +
"<div class='col-md-11'>" +
"<input type='text' name='date[" + date_count + "]' value='' class='form-control datepicker' /> " +
"</div>" +
"<div class='col-md-1' style='text-align: right;'>" +
"<a href='javascript:void(0);' class='btn btn-info' onclick='delete_date(" + date_count + ");'><i class='fa fa-minus'></i></a>" +
"</div>" +
"<div class='col-md-12'> </div>" +
"<div class='col-md-12'> </div>" +
"<div class='timing-selection_" + date_count + "'>" +
"<div class='col-md-12'>" +
"<div class='row'>" +
"<div class='col-md-5'>" +
"<input type='text' name='date[" + date_count + "][from]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-5'>" +
"<input type='text' name='date[" + date_count + "][to]' value='' class='form-control time-picker' /> " +
"</div>" +
"<div class='col-md-2' style='text-align: right;'>" +
"<a href='javascript:void(0);' class='btn btn-info add_timings' id='add_timings_"+date_count+"' data-id='"+date_count+"' onclick='add_timings(this)'>"+
"<i class='fa fa-plus'></i>"+
"</a>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
"</div>";
$("#date-selection").append(texttoappend + "<br />");
date_count++;
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
$('.time-picker').timepicker({
template: false,
showInputs: false,
minuteStep: 5
});
});
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
$('.time-picker').timepicker({
template: false,
showInputs: false,
minuteStep: 5
});
function delete_date(datecount) {
$("#delete_row_" + datecount).remove();
}
function deletetimings(datecount) {
$("#delete_timing_" + datecount).remove();
}
</script>
</body>
</html>