将最小 z-index 设置为 jquery datepicker

Question

我有一个案例，当我的日期选择器和一些带有按钮的 div 以错误的方式重叠时。 对于这种情况，我可以手动将 z-Index 设置为 datepicker（对于我的情况 z-Index:3 会很好），但这会破坏其他地方，因为 z-index 是由库计算的（据我所知）。

所以我想将最小 z-index 值设置为 datepicker 或者只是增加 z-Index。

所以我添加到设置对象自己的beforeShow函数：

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

但这仍然不起作用。

完整示例：http://jsfiddle.net/NAgNV/2314/

---

附：我无法使用按钮更改 div 的 z-Index。

Answer 1

只需在您的 css 文件中添加 !important：

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

http://jsfiddle.net/q693qtdt/

Answer 2

回答更新

事件处理程序beforeShow 在_showDatepicker 方法内运行。如果你想覆盖一个内部方法，我建议使用这个来代替 _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);
}

现在，您不再需要事件beforeShow：

sn-p：

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>

老答案

因为在 beforeShow z-index 值被重置，您可能会延迟：

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

您更新的fiddle 和示例：

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>