AfterShow event on jquery datepicker

Question

I am using jquery ui 1.12.0. I want to change the z-index after someone clicks in a text box and selects a date.

js Built-in example

I tried adding below, but really don't understand what _updateDatepicker_original and _updateDatepicker are:

$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker; $.datepicker._updateDatepicker = function(inst) { $.datepicker._updateDatepicker_original(inst); var afterShow = this._get(inst, 'afterShow'); if (afterShow) afterShow.apply((inst.input ? inst.input[0] : null)); } 

and then calling it as follows:

 $('.AddDatePicker').datepicker({ afterShow: function () { $('.ui-datepicker').css('z-index', '1000001'); } }); 

However, the z index does not change until I change the month.

is there an "afterShow" in jQuery UI datepicker? no answers ...

Any pointers, clues, clues will be appreciated. Thanks:)

Answer 1

You can use css for this without touching javascript using

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

Another option is to use the beforeShow 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; } 

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

Answer 2

Adding a timeout setting to nothing prevents css from changing the first time the _updateDatepicker event is fired. After further research, I found that _updateDatepicker is an event with jquery ui source code:

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

my decision:

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