jquery 在鼠标离开事件上关闭daterangepicker

xn1cxnb4 于 2023-10-17 发布在 jQuery

关注(0)|答案(4)|浏览(163)

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

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

现在让我们假设包含#transange的区域是body标签。我想应用类似这个函数的东西并关闭当前打开的daterangepicker。

$('body').on('mouseleave', function(){
      $('#reportrange').trigger('hide.daterangepicker'); //it doesn't work.
    });

一个简单的解决方案，如。

$('body').on('mouseleave', function(){
      $('#reportrange').hide();
    });

工作并隐藏该特定区域，但用户必须单击两次才能再次打开该daterangepicker。第一次点击再次关闭选择器（切换），第二次点击打开它。
为了正确理解它，如果你去这个JSFiddle https://jsfiddle.net/rg7fh1a8/现在，如果用户悬停在它的区域之外，我想关闭这个daterangepicker。

jquery

来源：https://stackoverflow.com/questions/56142215/to-close-daterangepicker-on-mouseleave-event

4条答案

按热度按时间

3df52oht1#

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

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

赞(0）回复(0）举报 2023-10-17

qnakjoqk2#

此解决方案在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>

展开查看全部

赞(0）回复(0）举报 2023-10-17

tzdcorbm3#

如何在外部使用click事件实现close

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