引导程序弹出窗口中的日期选择器
[英] Datepicker inside bootstrap popover
本文介绍了引导程序弹出窗口中的日期选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在弹出框内放置了一个日期选择器.日期选择器不工作.有没有人这样做过
<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><div id="popover-content" class="隐藏"><form role="form" method="post"><div class="form-group"><label>开始时间?</label><div class='input-group date' id='datetimepicker1'><input type='text' class="form-control" placeholder="事件的开始日期时间"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div class="form-group"><label>结束时间?</label><div class='input-group date' id='datetimepicker2'><input type='text' class="form-control" placeholder="结束日期时间"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div class="form-group"><button class="btn btn-primary btn-block">在日期之间搜索</button>
</表单>
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:对，内容:函数(){返回 $('#popover-content').html();}});
http://jsfiddle.net/J7nDz/43/
有人能发现错误吗?
解决方案
您可以使用以下方法实现，但是您尝试的方式，我怀疑使用引导程序 datetimepicker 可能无法实现，原因 moment.js 抛出以下错误
<块引用>语法错误:返回语句后无法访问代码
将 HTML 内容放入弹出触发按钮 data-content='' 并从 HTML 中删除 class="hide" 并且您还必须使用 popover 回调函数 或 bootstrap popover 事件a> 听众，您的选择.
<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"数据内容='<div id="popover-content"><form role="form" method="post"><div class="form-group"><label>开始时间?</label><div class="input-group date" id="datetimepicker1"><input type="text" class="form-control" placeholder="事件的开始日期时间"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div class="form-group"><label>结束时间?</label><div class="input-group date" id="datetimepicker2"><input type="text" class="form-control" placeholder="结束日期时间"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div class="form-group"><button class="btn btn-primary btn-block">在日期之间搜索</button>
</表单></div>'>日期</button>
带回调函数
$(document).ready(function () {var showPopover = $.fn.popover.Constructor.prototype.show;$.fn.popover.Constructor.prototype.show = function () {showPopover.call(this);如果(this.options.showCallback){this.options.showCallback.call(this);}}$("#PopS").popover({html:对，显示回调:函数(){$('#datetimepicker1').datetimepicker();$('#datetimepicker2').datetimepicker();}});});
拨弄回调函数
带弹出事件监听器
$(document).ready(function () {$("#PopS").popover({html: 真的}).on('shown.bs.popover', function () {$('#datetimepicker1').datetimepicker();$('#datetimepicker2').datetimepicker();});});
摆弄事件监听器
I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this
<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/
Can someone spot the error?
解决方案
You can achieve with following approach but the way you are trying, I've doubts it may not be possible with bootstrap datetimepicker, reason moment.js throws following error
SyntaxError: unreachable code after return statement
Put HTML content inside popover trigger button data-content='' and remove class="hide" from HTML and also you have to use a popover callback function or bootstrap popover event listener, your choice.
<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>
With Callback Function
$(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();
}
});
});
Fiddle with callback function
With popover event listener
$(document).ready(function () {
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
});
Fiddle with event listener
这篇关于引导程序弹出窗口中的日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
