Aftershow Event On Jquery Datepicker

I am using the date picker component of jQuery UI 1.12.0. I want to change the z-index after someone clicks in the textbox and the date picker is through showing. jsFiddle example

Solution 1:

You can use css for that without touching the javascript using

.ui-datepicker.ui-widget {
    z-index: 3!important;
}

Another option is to use the beforeShow callback in order to add a specific class to the datepicker:

$(function() {
  $('.AddDatePicker').datepicker({
    beforeShow: function(el, inst) {
      inst.dpDiv.addClass('zin')
    }
  });
});

.itw {
  z-index: 2;
  display: block;
  background-color: black;
  position: absolute;
}

.zin {
  z-index: 3!important;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script><linkrel="stylesheet"type="text/css"href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"><inputtype="text"id="dtp"class="AddDatePicker" /><br /><br /><br /><br /><br /><br /><br /><inputtype="text"id="intheway"class="itw" />

Solution 2:

Adding a setting a time out to nothing allows the css to be changed on the first firing of the _updateDatepicker event. After more research I discovered that _updateDatepicker is an event with the jquery ui source code:

/* Generate the date picker content. */
    _updateDatepicker: function( inst ) {...

my solution:

 $('.AddDatePicker').datepicker({
            beforeShow: function () {                
                setTimeout(function () {
                    $('#ui-datepicker-div').css('z-index', '1000001');
                }, 0);
            }
        });