Jquery Datepicker events get called even under an overlay

Question

Thanks in advance for your help! I am trying to build a JQuery UI datepicker, where Days with events are disabled. Works great so far.

My problem is, that the processing of BeforeShowDay() can take rather long, so I'd like to disable user inputs during this time and display a Overlay. The overlay works fine, but when I click at the position of a button or date (while the overlay is displayed), the event will be fired right after the loading is complete and the overlay is being removed. I have been struggling to find out why, z-index is right and event.stopPropagation has brought no success. So I am reaching out for your help!

My Code:

    $("#datepickerloader").css("display", "block");  //<---- Here the overlay is added
    $.ajax({
        type: 'POST',
        url: '/pxxx/xxxxx',
        data: {"xxx":"XXXX"},
        success: function (re) {

            //processing of re removed

            if ($("#datepicker").hasClass("hasDatepicker")) {
                $("#datepicker").datepicker("refresh");
            } else {
                $("#datepicker").datepicker({
                    dateFormat: 'dd.mm.yy',
                    onSelect: function (date) {
                        displayTimes($(this).datepicker('getDate'));

                    },
                    beforeShowDay: function (date) {
                        if (typeof (allreturns[moment(date).format('YYYYMMDD')]) === "undefined" && typeof (monthlist[moment(date).format('YYYYMMDD')]) !== "undefined") {
                            var result = checkAvailability(date);
                            updateTimeSelectEvents();
                            return result;
                        } else if (typeof (allreturns[moment(date).format('YYYYMMDD')]) === "undefined" && monthlist === "empty") {
                            var result = checkAvailability(date);
                            updateTimeSelectEvents();
                            return result;
                        } else if (typeof (allreturns[moment(date).format('YYYYMMDD')]) !== "undefined") {
                            return allreturns[moment(date).format('YYYYMMDD')];
                        } else {
                            return [false, "", ""];
                        }
                    },
                    onChangeMonthYear: function (year, month) {
                        console.log("function called");
                        currentDisplayedMonth = month;
                        currentDisplayedYear = year;
                        //$("#possibleTimesContainer").html('');
                        if ($("#possibleTimesContainer").find(".open").length !== 0) {
                            $("#possibleTimesContainer").find(".open").removeClass("open");
                        }
                        var checkDate = (moment(new Date()).month(month - 1)).year(year).startOf('month');
                        if (typeof (allreturns[checkDate.format("YYYYMMDD")]) === "undefined") {
                            getAppointementsofMonth(month, year);
                        }


                    }
                });
            }
            console.log("removing overlay");
            $("#datepickerloader").css("display","none"); //<---- Here the overlay is removed
            updateTimeSelectEvents();
        }
    });

EDIT as Requested, here is the HTML & CSS

<div id="datepicker_container">
            <p><?php echo $this->translate("Datum") ?></p>
            <div id="datepickerloader"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
            <div id="datepicker"></div>

            <div id="possibleTimesContainer"></div>
        </div>

CSS:

#datepicker_container{
 margin: 0 auto;
 margin-bottom:50px;
 position: relative;
}

#datepickerloader{
 display: none;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #d7d7d7;
 text-align: center;
 z-index: 100;
 opacity: 0.8;
 border-radius: 5px;
}
#datepickerloader i{
 position:absolute;
 top:50%;
}

Edit Snippet showing overlay over the datepicker. Issue is that any clicks while the overlay is in place and the picker is processing then run when the overlay is removed; this is not demonstrated in this snippet

$("#datepickerloader").css("display", "block"); //<---- Here the overlay is added

$("#datepicker").datepicker({
  dateFormat: 'dd.mm.yy',
});

#datepicker_container {
  margin: 0 auto;
  margin-bottom: 50px;
  position: relative;
}

#datepickerloader {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #d7d7d7;
  text-align: center;
  z-index: 100;
  opacity: 0.8;
  border-radius: 5px;
}

#datepickerloader i {
  position: absolute;
  top: 50%;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<div id="datepicker_container">
  <p>Date</p>
  <div id="datepickerloader"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
  <div id="datepicker"></div>
  <div id="possibleTimesContainer"></div>
</div>