Bootstrap 日期时间选择器无法在崩溃中工作
Bootstrap Datetimepicker not working in collapse
我在 bootsrap 崩溃 javascript 组件中使用 bootstrap3 链接的日期时间选择器。问题是日期时间选择器没有显示。我不确定是什么导致了这个问题,因为我已经按照许多其他人的建议尝试了 z-index,但它并没有解决我的问题。
这是我的脚本代码。我对 jQuery 不是很有经验,但我编写了这段代码以动态地将行添加到具有可折叠视图的表单中
<script>
var id = 0;
function example_append() {
id++;
$(".newTicket").prepend("<li>" +
"<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Name'/>" + "</div>" +
"<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Quantity'/>" + "</div>" +
"<div class='col-md-2'>" + "<input type='text' class='form-cantrol' placeholder='Price'/>" + "</div>" +
"<div class='col-md-2'>" + "<a href='#" + id + "' alt='' data-toggle='collapse' aria-expanded='false'><img src='image/2x_web/ic_settings_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" +
"<div class='col-md-2'>" + "<a href='javascript:void(0);' class='remove'><img src='image/2x_web/ic_delete_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" +
"</li>" +
"<div class='collapse' id='" + id + "'>" +
"<div class='well'>" +
"<label>Description</label>" + "<input type='text' class='form-cantrol' placeholder='Enter a Description'/>" +
"<div class='form-group'>" +
"<div class='row'>"+
"<div class='col-md-2'>"+
"<label for='datetimepicker3'>Sales Start</label>"+
"</div>"+
"<div class='col-md-5'>"+
"<div class='input-group date' id='datetimepicker3'>"+
"<input type='text' class='form-cantrol' />"+
"<span class='input-group-addon'>"+
"<span class='glyphicon glyphicon-calendar'></span>"+
"</span>"+
"</div>"+
"</div>"+
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<div class='row'>"+
"<div class='col-md-2'>"+
"<label for='datetimepicker4'>Sales End</label>"+
"</div>"+
"<div class='col-md-5'>"+
"<div class='input-group date' id='datetimepicker4'>"+
"<input type='text' class='form-cantrol' />"+
"<span class='input-group-addon'>"+
"<span class='glyphicon glyphicon-calendar'></span>"+
"</span>"+
"</div>"+
"</div>"+
"</div>" +
"</div>" +
"<label>Minimum to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter the minimum'/>" +
"<label>Maximun to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter that maximum'/>" +
"</div>" +
"</div>");
}
$(document).on("click", "input-group-addon", function () {
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
$(document).on("click", "a.remove", function () {
$(this).closest('li').remove();
});
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
</script>
也许问题是永远不会触发 onclick。
改变
$(document).on("click", "input-group-addon", function () {
至
$(document).on("click", ".input-group-addon", function () {
我在 bootsrap 崩溃 javascript 组件中使用 bootstrap3 链接的日期时间选择器。问题是日期时间选择器没有显示。我不确定是什么导致了这个问题,因为我已经按照许多其他人的建议尝试了 z-index,但它并没有解决我的问题。
这是我的脚本代码。我对 jQuery 不是很有经验,但我编写了这段代码以动态地将行添加到具有可折叠视图的表单中
<script>
var id = 0;
function example_append() {
id++;
$(".newTicket").prepend("<li>" +
"<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Name'/>" + "</div>" +
"<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Quantity'/>" + "</div>" +
"<div class='col-md-2'>" + "<input type='text' class='form-cantrol' placeholder='Price'/>" + "</div>" +
"<div class='col-md-2'>" + "<a href='#" + id + "' alt='' data-toggle='collapse' aria-expanded='false'><img src='image/2x_web/ic_settings_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" +
"<div class='col-md-2'>" + "<a href='javascript:void(0);' class='remove'><img src='image/2x_web/ic_delete_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" +
"</li>" +
"<div class='collapse' id='" + id + "'>" +
"<div class='well'>" +
"<label>Description</label>" + "<input type='text' class='form-cantrol' placeholder='Enter a Description'/>" +
"<div class='form-group'>" +
"<div class='row'>"+
"<div class='col-md-2'>"+
"<label for='datetimepicker3'>Sales Start</label>"+
"</div>"+
"<div class='col-md-5'>"+
"<div class='input-group date' id='datetimepicker3'>"+
"<input type='text' class='form-cantrol' />"+
"<span class='input-group-addon'>"+
"<span class='glyphicon glyphicon-calendar'></span>"+
"</span>"+
"</div>"+
"</div>"+
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<div class='row'>"+
"<div class='col-md-2'>"+
"<label for='datetimepicker4'>Sales End</label>"+
"</div>"+
"<div class='col-md-5'>"+
"<div class='input-group date' id='datetimepicker4'>"+
"<input type='text' class='form-cantrol' />"+
"<span class='input-group-addon'>"+
"<span class='glyphicon glyphicon-calendar'></span>"+
"</span>"+
"</div>"+
"</div>"+
"</div>" +
"</div>" +
"<label>Minimum to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter the minimum'/>" +
"<label>Maximun to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter that maximum'/>" +
"</div>" +
"</div>");
}
$(document).on("click", "input-group-addon", function () {
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
$(document).on("click", "a.remove", function () {
$(this).closest('li').remove();
});
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
</script>
也许问题是永远不会触发 onclick。
改变
$(document).on("click", "input-group-addon", function () {
至
$(document).on("click", ".input-group-addon", function () {