{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 闹够了就滚 的问题《To close daterangepicker on mouseleave event》','https://www.manongdao.com/q-1038161.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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);
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();
});
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.
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.
In Date Range Picker Available
hide.daterangepickerEvent. Go to http://www.daterangepicker.com/#events, Check hide event.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:
This solution finds the cancel button in the daterangepicker and clicks it programmatically. It assumes that the daterangepicker library is using the default classes that the current release assigns to it's controls. These class names were found by examining the elements of the daterangepicker in the rendered HTML using chrome dev tools.
Avoid putting
onmouseleaveon the body itself (unless you're usingonwith a selector). I've attached it to the class in this example.