javascript - jQuery 日期选择器上的 afterShow 事件

Question

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

jsFiddle example

我尝试添加以下内容，但真的不明白 _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

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

另一种选择是使用 beforeShow 回调来将特定类添加到日期选择器:

$(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" />