在mouseleave事件上关闭daterangepicker [英] To close daterangepicker on mouseleave event
问题描述
我在我的应用程序中使用了daterangepicker库.一旦使用离开daterangepicker容器区域，我想触发daterangepicker的内部方法.hide().我的代码看起来像这样.
I am using the daterangepicker library in my application. I want to trigger daterangepicker's internal method .hide() once use leaves daterangepicker container area. My code looks like this.
<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标签.我想应用类似此功能的内容并关闭当前打开的daterangepicker.
Now let's say #reportrange containing area is body tag. I want to apply something like this function and close the current open daterangepicker.
$('body').on('mouseleave', function(){
$('#reportrange').trigger('hide.daterangepicker'); //it doesn't work.
});
像这样的简单解决方案.
A simple solution like.
$('body').on('mouseleave', function(){
$('#reportrange').hide();
});
可以工作并隐藏该特定区域，但是用户必须单击两次才能再次打开该daterangepicker.拳头再次单击关闭选择器(切换)，然后再次单击打开选择器.
works and hides that particular area but user have to click twice to open that daterangepicker again. As fist click is again closing picker ( toggle ) and second click is opening it.
要正确理解它，如果您转到此JSFiddle https://jsfiddle.net/rg7fh1a8/ 现在，如果用户将鼠标悬停在它的外部，我想关闭此daterangepicker.
To understand it properly, if you go to this JSFiddle https://jsfiddle.net/rg7fh1a8/ Now if the user hovers outside area of it, I want to close this daterangepicker.
推荐答案
我知道已经有一个可以接受的答案，但是我认为这也很有用，因为它使用的是daterangepicker的本地隐藏功能，而不是模拟单击取消"按钮的方式:
I know there's already an accepted answer, but I think this could also be useful because it's using the daterangepicker's native hide function instead of simulating a click on cancel button:
$(function(){
$('.daterangepicker').mouseleave(function(){
$('#reportrange').data('daterangepicker').hide();
});
});
这篇关于在mouseleave事件上关闭daterangepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
