To Close Daterangepicker On Mouseleave Event

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

Solution 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:

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

Solution 2:

This solution finds the cancel button in the daterangepicker and clicks it programmatically. It assumes that the daterangepicker library is using the default classes that the current release assigns to it's controls. These class names were found by examining the elements of the daterangepicker in the rendered HTML using chrome dev tools.

Avoid putting onmouseleave on the body itself (unless you're using on with a selector). I've attached it to the class in this example.

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

functioninit() {
$('.daterangepicker').on("mouseleave", function() { $(this).find('.cancelBtn').click() });
}

$(init);
    

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scripttype="text/javascript"src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script><scripttype="text/javascript"src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script><scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script><linkrel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /><divclass="visual-rangepicker"><inputid="reportrange"value="01/01/2015 - 01/31/2015"></div>

Solution 3:

In Date Range Picker Available hide.daterangepicker Event. Go to http://www.daterangepicker.com/#events, Check hide event.