在mouseleave事件上关闭daterangepicker

Question

I am using the daterangepicker library in my application. 我在应用程序中使用daterangepicker库。 I want to trigger daterangepicker's internal method .hide() once use leaves daterangepicker container area. 一旦使用离开daterangepicker容器区域，我想触发daterangepicker的内部方法.hide（）。 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>&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);

Now let's say #reportrange containing area is body tag. 现在，假设#reportrange包含的区域是body标签。 I want to apply something like this function and close the current open daterangepicker. 我想应用类似此功能的内容并关闭当前打开的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. 可以隐藏该特定区域，但用户必须单击两次才能再次打开该daterangepicker。 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. 为了正确理解它，如果您转到此JSFiddle https://jsfiddle.net/rg7fh1a8/现在，如果用户将鼠标悬停在它的外部，我想关闭此daterangepicker。

Answer 1

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: 我知道已经有一个可接受的答案，但是我认为这也可能有用，因为它使用的是daterangepicker的本地隐藏功能，而不是模拟单击“取消”按钮的方式：

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

Answer 2

This solution finds the cancel button in the daterangepicker and clicks it programmatically. 此解决方案在daterangepicker中找到“取消”按钮，并以编程方式单击它。 It assumes that the daterangepicker library is using the default classes that the current release assigns to it's controls. 假定daterangepicker库正在使用当前版本分配给其控件的默认类。 These class names were found by examining the elements of the daterangepicker in the rendered HTML using chrome dev tools. 通过使用chrome dev工具检查呈现的HTML中daterangepicker的元素，可以找到这些类名。

Avoid putting onmouseleave on the body itself (unless you're using on with a selector). 避免将onmouseleave对身体本身（除非你使用on有选择）。 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.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>

Answer 3

In Date Range Picker Available hide.daterangepicker Event. 在“日期范围选择器”中可用的hide.daterangepicker事件。 Go to http://www.daterangepicker.com/#events , Check hide event. 转到http://www.daterangepicker.com/#events ，检查隐藏事件。

在mouseleave事件上关闭daterangepicker

问题描述

3 个解决方案

解决方案1
3 已采纳 2019-05-17 10:38:36

解决方案2
2 2019-05-16 02:05:56

解决方案3
-2 2019-05-17 05:20:08

在mouseleave事件上关闭daterangepicker

问题描述

3 个解决方案

解决方案1 3 已采纳 2019-05-17 10:38:36

解决方案2 2 2019-05-16 02:05:56

解决方案3 -2 2019-05-17 05:20:08

解决方案1
3 已采纳 2019-05-17 10:38:36

解决方案2
2 2019-05-16 02:05:56

解决方案3
-2 2019-05-17 05:20:08