我在我的应用程序中使用 daterangepicker 库。一旦使用离开 daterangepicker 容器区域，我想触发 daterangepicker 的内部方法 .hide() 。我的代码看起来像这样。
<body class="visual-sandbox">
<div class="visual-rangepicker">
<div id="reportrange" class="report-range">
<div class="calendar-icon">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>
<span></span> <b class="caret caret-dropdown"></b>
</div>
</div>
</body>
$("#reportrange").daterangepicker(
{
startDate: start,
endDate: end,
opens: 'left',
ranges: {
// new Date(2017, 11, 1)
Today: [moment(new Date()), moment(new Date())],
Yesterday: [
moment(new Date()).subtract(1, "days"),
moment(new Date()).subtract(1, "days")
],
"Last 7 Days": [moment(new Date()).subtract(6, "days"), moment(new Date())],
"Last 30 Days": [moment(new Date()).subtract(29, "days"), moment(new Date())],
"This Month": [moment(new Date()).startOf("month"), moment(new Date()).endOf("month")],
"Last Month": [
moment(new Date())
.subtract(1, "month")
.startOf("month"),
moment(new Date())
.subtract(1, "month")
.endOf("month")
],
"Last Year": [
moment(new Date())
.subtract(1, "year")
.startOf("year"),
moment(new Date())
.subtract(1, "year")
.endOf("year"),
]
}
},
cb
).on;
cb(start, end);
现在假设 #reportrange 包含区域是 body 标签。我想应用类似这个函数的东西并关闭当前打开的日期范围选择器。
$('body').on('mouseleave', function(){
$('#reportrange').trigger('hide.daterangepicker'); //it doesn't work.
});
一个简单的解决方案，例如。
$('body').on('mouseleave', function(){
$('#reportrange').hide();
});
可以工作并隐藏该特定区域，但用户必须单击两次才能再次打开该日期范围选择器。由于第一次单击再次关闭选择器（切换），第二次单击打开它。
要正确理解它，如果你去这个 JSFiddle https://jsfiddle.net/rg7fh1a8/ 现在，如果用户将鼠标悬停在其区域之外，我想关闭此日期范围选择器。
我知道已经有一个被接受的答案，但我认为这也可能很有用，因为它使用 daterangepicker 的本机隐藏功能而不是模拟单击取消按钮：
$(function(){
$('.daterangepicker').mouseleave(function(){
$('#reportrange').data('daterangepicker').hide();
});
});
此解决方案在日期范围选择器中找到取消按钮并以编程方式单击它。它假设 daterangepicker 库正在使用当前版本分配给其控件的默认类。这些类名是通过使用 chrome 开发工具检查渲染的 HTML 中 daterangepicker 的元素找到的。
避免将
onmouseleaveon$(function() {
$('#reportrange').daterangepicker();
});
function init() {
$('.daterangepicker').on("mouseleave", function() { $(this).find('.cancelBtn').click() });
}
$(init);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="visual-rangepicker">
<input id="reportrange" value="01/01/2015 - 01/31/2015">
</div>$('--DIV ID--').data('daterangepicker').hide();
$('#reportrange').data('daterangepicker').hide(); // 更改为隐藏状态
$('#reportrange').daterangepicker(); // 更改为隐藏状态并重置选项