将最小Z索引设置为jQuery Datepicker

Question

I have case, when my datepicker and some div with buttons overlaps in wrong way. For this case I can set manually z-Index to datepicker(for my case z-Index:3 will be fine), but this will broke other places, as z-index is calculated by library (as I know).

So I want to set minimum z-index value to datepicker or just increase z-Index.

So I add to setting object own beforeShow function:

options.beforeShow = function (input,inst ){
    inst.dpDiv.css('z-index', inst.dpDiv.css('z-index') + 2);
}

But this still didn't work.

Full Example: http://jsfiddle.net/NAgNV/2314/

---

PS I can't change z-Index of div with buttons.

Answer 1

ANSWER UPDATE

The event handler beforeShow runs inside the _showDatepicker method. If you wish to overwrite an internal method I suggest to use this one instead of _updateDatepicker :

$.datepicker._showDatepicker_original = $.datepicker._showDatepicker;
   $.datepicker._showDatepicker = function(input) {
   $.datepicker._showDatepicker_original(input);
   // now change the z-index
   $.datepicker.dpDiv.css('z-index', +$.datepicker.dpDiv.css('z-index') + 2);
}

Now, you don't need anymore the event beforeShow :

The snippet:

 ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { var $el = $(element); //initialize datepicker with some optional options var options = allBindingsAccessor().datepickerOptions || {}; $.datepicker._showDatepicker_original = $.datepicker._showDatepicker; $.datepicker._showDatepicker = function(input) { $.datepicker._showDatepicker_original(input); // now change the z-index console.log('Initial z-index: ' + $.datepicker.dpDiv.css('z-index')); $.datepicker.dpDiv.css('z-index', +$.datepicker.dpDiv.css('z-index') + 2); console.log('Changed z-index: ' + $.datepicker.dpDiv.css('z-index')); } $el.datepicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function() { var observable = valueAccessor(); observable($el.datepicker("getDate")); }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $el.datepicker("destroy"); }); }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), $el = $(element), current = $el.datepicker("getDate"); if (value - current !== 0) { $el.datepicker("setDate", value); } } }; var viewModel = { myDate: ko.observable(new Date("12/01/2013")), setToCurrentDate: function() { this.myDate(new Date()); } }; ko.applyBindings(viewModel); 

 td, th { padding: 5px; border: solid 1px black; } th { color: #666; } a { font-size: .75em; } .scrolled {height : 100px;} .btn-c{z-index: 3; position : relative;} 

 <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script> <div class='scrolled'> <input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" /> </div> <hr /> <div class='btn-c'> <button data-bind="click: setToCurrentDate">Set To Current Date</button> </div> <hr /> <div data-bind="text: myDate"></div> 

OLD ANSWER

Because on beforeShow z-index value is reset you may delay the:

inst.dpDiv.css('z-index', inst.dpDiv.css('z-index') + 2);

Your updated fiddle and the example:

 ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { var $el = $(element); //initialize datepicker with some optional options var options = allBindingsAccessor().datepickerOptions || {}; options.beforeShow = function (input,inst ){ setTimeout(function() { inst.dpDiv.css('z-index', inst.dpDiv.css('z-index') + 2); }, 1); } $el.datepicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function() { var observable = valueAccessor(); observable($el.datepicker("getDate")); }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $el.datepicker("destroy"); }); }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), $el = $(element), current = $el.datepicker("getDate"); if (value - current !== 0) { $el.datepicker("setDate", value); } } }; var viewModel = { myDate: ko.observable(new Date("12/01/2013")), setToCurrentDate: function() { this.myDate(new Date()); } }; ko.applyBindings(viewModel); 

 td, th { padding: 5px; border: solid 1px black; } th { color: #666; } a { font-size: .75em; } .scrolled {height : 100px;} .btn-c{z-index: 3; position : relative;} 

 <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script> <div class='scrolled'> <input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" /> </div> <hr /> <div class='btn-c'> <button data-bind="click: setToCurrentDate">Set To Current Date</button> </div> <hr /> <div data-bind="text: myDate"></div> 

Answer 2

Simply add !important in your css file:

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

http://jsfiddle.net/q693qtdt/