本文介绍了在mouseleave事件上关闭daterangepicker的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的应用程序中使用了daterangepicker库.一旦使用离开daterangepicker容器区域,我想触发daterangepicker的内部方法.hide().我的代码看起来像这样.

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>&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.

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();
    });

可以工作并隐藏该特定区域,但是用户必须单击两次才能再次打开该daterangepicker.拳头再次单击关闭选择器(切换),然后再次单击打开选择器.

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.

要正确理解它,如果您转到此JSFiddle https://jsfiddle.net/rg7fh1a8/现在,如果用户将鼠标悬停在它的外部,我想关闭此daterangepicker.

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.

推荐答案

我知道已经有一个可以接受的答案,但是我认为这也很有用,因为它使用的是daterangepicker的本地隐藏功能,而不是模拟单击取消"按钮的方式:

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:

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

这篇关于在mouseleave事件上关闭daterangepicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-11 05:54