jQuery datepicker上的afterShow事件 [英] afterShow event on jQuery datepicker

问题描述

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

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示例

我尝试添加以下内容，但实际上不了解_updateDatepicker_original和_updateDatepicker是什么:

I have tried adding the below, but really don't understand what the _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));
    }

我这样称呼:

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

但是，z-index不会改变，直到我更改月份为止.

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

推荐答案

您可以在不使用javascript的情况下使用css

You can use css for that without touching the javascript using

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

另一个选择是使用beforeShow回调，以便将特定的类添加到datepicker:

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;
}

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

这篇关于jQuery datepicker上的afterShow事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！