Bootstrap按钮中的Bootstrap datepicker下拉列表
why*_*to8 12 jquery datepicker event-handling twitter-bootstrap drop-down-menu
我的要求:我正在使用twitter bootstrap按钮下拉列表(http://twitter.github.io/bootstrap/components.html#buttonDropdowns)并使用bootstrap-datepicker(http://eternicode.github.io/bootstrap-datepicker/#examples)其中一个列表项如下图所示.
根据我的要求,我需要在最后一项中有月历并点击它打开bootstrap-datepicker,我应该能够选择月份和年份.
我面临的问题:当我打开该日期选择器并选择任何月份或年份或点击日期选择器中的任何导航移动到另一个月或一年时,按钮下拉隐藏,但是日期选择器保留在那里,如下图所示.我一直在努力但却无法让它发挥作用.
我的想法(不确定它的正确与否):当我点击datepicker时,它会被直接附加到body元素,因为所有列表项和它们的子项都在html中.因此,即使我尝试停止下拉列表中任何点击的事件传播,它也不会计入datepicker,因为它会附加到正文.(只是为了获取更多信息,我点击其他列表项时定义了一些操作)
如果有人可以帮我解决这个问题,我真的很感激,我真的需要让这个东西适合我的项目.
PSL*_*PSL 11
使用此日期选择器,您需要防止在各个按钮上传播.在脚本中添加它.
$(document).on('click', 'span.month, th.next, th.prev, th.switch, span.year', function (e) {
e.stopPropagation();
});
接受的答案对我不起作用,但我找到了另一种解决方法.
变通
$('#your-datepicker')
.datepicker()
.on('show', function(e) {
var $popup = $('.datepicker');
$popup.click(function () { return false; });
});
说明
日期选择器似乎将其HTML添加到<body>每次显示的末尾.弹出窗口的HTML类似于以下内容:
<div
class="
datepicker
datepicker-dropdown
dropdown-menu
datepicker-orient-left
datepicker-orient-top
"
style="display: block; top: 202px; left: 712.5px; z-index: 1010;">
<!-- More HTML here -->
</div>
其他解决方案已经表明,防止click事件的传播可以解决问题.实现此目的的一种方法是处理事件并返回false.由于每次显示弹出窗口时都会生成HTML,因此每次都可能需要配置拦截.
| 归档时间： |
|
| 查看次数： |
21584 次 |
| 最近记录： |