admin管理员组文章数量:1401649
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 / Now if the user hovers outside area of it, I want to close this daterangepicker.
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/rg7fh1a8/ Now if the user hovers outside area of it, I want to close this daterangepicker.
Share Improve this question edited May 17, 2019 at 5:04 Aakash Kumar asked May 15, 2019 at 5:20 Aakash KumarAakash Kumar 8934 gold badges15 silver badges39 bronze badges 12-
You try
triggeringclickon the cancel button? – Tibrogargan Commented May 15, 2019 at 5:26 - No. I need to call it by default once the user leaves the containing area with the mouse. – Aakash Kumar Commented May 15, 2019 at 5:32
-
Right. Instead of calling
hide(), calltrigger()on the click button which should also hide the dialog but eliminate the need to click twice. – Tibrogargan Commented May 15, 2019 at 5:34 - Can you provide the code snippet? I tried trigger too but not getting how to call daterangepicker internal method. Currently, above-mentioned methods point to jQuery instead of daterangepicker. I know it has to do something using the correct way of passing references. – Aakash Kumar Commented May 15, 2019 at 5:41
- You would need to provide an minimal reproducible example. I don't have your HTML or what scripts you're including. – Tibrogargan Commented May 15, 2019 at 5:43
4 Answers
Reset to default 6I 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();
});
});
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 onmouseleave on the body itself (unless you're using on with a selector). I've attached it to the class in this example.
$(function() {
$('#reportrange').daterangepicker();
});
function init() {
$('.daterangepicker').on("mouseleave", function() { $(this).find('.cancelBtn').click() });
}
$(init);
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.css" />
<div class="visual-rangepicker">
<input id="reportrange" value="01/01/2015 - 01/31/2015">
</div>How to implement close using a click event externally
$('--DIV ID--').data('daterangepicker').hide();
$('#reportrange').data('daterangepicker').hide(); // change to hidden state
$('#reportrange').daterangepicker(); // change to hidden state AND reset options
ex) <button onclick="$('#reportrange').data('daterangepicker').hide();">Close Test</button>
In Date Range Picker Available hide.daterangepicker Event. Go to http://www.daterangepicker./#events, Check hide event.
本文标签： javascriptTo close daterangepicker on mouseleave eventStack Overflow
版权声明：本文标题：javascript - To close daterangepicker on mouseleave event - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744222110a2595915.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论