在 mouseleave 事件上关闭 daterangepicker答案

【问题标题】：To close daterangepicker on mouseleave event在 mouseleave 事件上关闭 daterangepicker
【发布时间】：2019-05-15 05:20:55
【问题描述】：

我在我的应用程序中使用 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>&nbsp;
          <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。

【问题讨论】：

你在取消按钮上尝试triggering click？
没有。一旦用户用鼠标离开包含区域，我需要默认调用它。
对。不要调用hide()，而是在单击按钮上调用trigger()，这也应该隐藏对话框，但无需单击两次。
能提供sn-p的代码吗？我也尝试了触发器，但没有得到如何调用 daterangepicker 内部方法。目前，上述方法指向 jQuery 而不是 daterangepicker。我知道它必须使用正确的引用传递方式来做一些事情。
您需要提供minimal reproducible example。我没有您的 HTML 或您包含的脚本。

标签： javascript jquery daterangepicker

【解决方案1】：

我知道已经有一个公认的答案，但我认为这也很有用，因为它使用了 daterangepicker 的本机隐藏功能，而不是模拟点击取消按钮：

$(function(){
    $('.daterangepicker').mouseleave(function(){
        $('#reportrange').data('daterangepicker').hide();
    });
});

【讨论】：

我认为这似乎是一种更正确的方法。
@AakashKumar 这实际上不是一个好主意，因为点击处理程序不仅仅是hide()。它还修改了一些内部变量并触发cancel.daterangepicker 事件。您可能可以在 daterangepicker 上调用 clickCancel，但它可能不会被导出。这将是一个更好的解决方案，但它会让您严重依赖 3rd 方解决方案的内部实现——这不是一个好主意。
由于这是您应该根据文档调用 daterangepicker 对象的方法的方式，因此我认为硬依赖不会成为问题，因为如果对实现进行任何更改，则应在文档中提及作者更改了代码。而hide() 方法在代码中的使用频率很高，以至于我想不出任何理由来重命名它或完全改变它的功能。
如果你打电话给 hide 那个 daterangepicker 暴露我会同意，但你打电话给 JQuery 的hide
不。在 daterangepicker 的内部 hide 函数中放置一个警报告诉我它不是 jQuery 的 hide 我正在调用。我也可以在 mouseleave 上使用 clickCancel()（这肯定不是 jQuery 函数，但在 daterangepicker 代码中定义）而不是 hide()，它正在工作。

【解决方案2】：

此解决方案在 daterangepicker 中找到取消按钮并以编程方式单击它。它假定 daterangepicker 库使用当前版本分配给它的控件的默认类。这些类名是通过使用 chrome 开发工具检查呈现的 HTML 中的 daterangepicker 元素找到的。

避免将onmouseleave 放在主体本身（除非您将on 与选择器一起使用）。我已将它附加到此示例中的类。

$(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>

【讨论】：

它就像一个魅力。为什么我感觉这么傻。我知道 jQuery，但我没有想到这个简单的解决方案。非常感谢。 @Tibrogargan

【解决方案3】：

日期范围选择器可用hide.daterangepicker 事件。转到http://www.daterangepicker.com/#events，查看隐藏事件。

【讨论】：

调用hide() 方法时会触发hide.daterangepicker 事件。鼠标离开daterangepicker时不调用
我只尝试了这个对我不起作用的解决方案。