javascript - 在 mouseleave 事件上关闭 daterangepicker
问题描述
我在我的应用程序中使用 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 标签。我想应用类似这个函数的东西并关闭当前打开的 daterangepicker。
$('body').on('mouseleave', function(){
$('#reportrange').trigger('hide.daterangepicker'); //it doesn't work.
});
一个简单的解决方案,如。
$('body').on('mouseleave', function(){
$('#reportrange').hide();
});
工作并隐藏该特定区域,但用户必须单击两次才能再次打开该日期范围选择器。由于第一次单击再次关闭选择器(切换),第二次单击正在打开它。
为了正确理解它,如果你去这个 JSFiddle https://jsfiddle.net/rg7fh1a8/ 现在如果用户悬停在它的区域之外,我想关闭这个 daterangepicker。
解决方案
我知道已经有一个公认的答案,但我认为这也很有用,因为它使用 daterangepicker 的本机隐藏功能而不是模拟单击取消按钮:
$(function(){
$('.daterangepicker').mouseleave(function(){
$('#reportrange').data('daterangepicker').hide();
});
});
推荐阅读
- pyspark - 如何在 Pyspark MLlib 模型中允许 NULL/NaN?
- python-3.x - 有没有办法并行运行子进程?
- java - 如何调试jvm内存泄漏?
- ios - 如何在 Swift 中重构重复的 Firestore 文档 ID?
- r - 如何创建具有两个向量中存在的字符链的变量
- mongodb - Mongo db 请求不是基于哈希的
- excel - 通过 VBA 实现索引匹配函数的 Fillfdown 方法
- node.js - 如何从另一个模块发射?socket.io、node.js
- python - 使用多列样式化 pandas pivot_table
- vuex - Quasar 复选框和突变