Question

我正在使用jQuery UI 1.12.0的日期选择器组件。我想在有人点击文本框后更改z-index，日期选择器就会显示。

我尝试添加以下内容，但实际上并不了解_updateDatepicker_original和_updateDatepicker的内容：

$.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));
    }

我称之为：

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

但是，在我更改月份之前，z-index不会更改。

Answer 1

您可以使用css，而无需使用

触摸javascript

#include <functional>
template<class Type, std::function<void(Type*)> callback>
class Library {
    // Some Stuff...
    Type* node = nullptr;
public:
    void utility() {
         callback(this->node);
    }
};

另一种选择是使用.ui-datepicker.ui-widget { z-index: 3 !important; }回调来向datepicker添加特定的类：

＆＃13;

beforeShow

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将设置时间添加到空，允许在第一次触发_updateDatepicker事件时更改css。经过更多的研究，我发现_updateDatepicker是一个带有jquery ui源代码的事件：

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

我的解决方案：

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

jQuery datepicker上的afterShow事件

2 个答案: