我在弹出框内放置了一个日期选择器。日期选择器不工作。有没有人这样做过
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click"
data-placement="bottom" data-container="body" data-html="true" id="login"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
</button>
<div id="popover-content" class="hide">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Start Date time of event"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="End Date time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>
</div>
JS
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
http://jsfiddle.net/J7nDz/43/
有人能发现错误吗?
您可以通过以下方法实现,但就您尝试的方式而言,我怀疑引导程序可能无法实现datetimepicker
, 原因moment.js
抛出以下错误
语法错误:返回语句后无法访问代码
将 HTML 内容放入弹出框触发按钮内data-content=''
并删除class="hide"
来自 HTML 并且你还必须使用弹出窗口回调函数 or 引导弹出窗口事件听众,你的选择。
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="PopS"
data-content='
<div id="popover-content">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" placeholder="Start Date time of event" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" placeholder="End Date time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>'>Date</button>
</div>
具有回调功能
$(document).ready(function () {
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$("#PopS").popover({
html: true,
showCallback: function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
}
});
});
摆弄回调函数
使用弹出窗口事件监听器
$(document).ready(function () {
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
});
摆弄事件监听器
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)