CODEWITHSUNDEEP
javascriptjquerycssknockout.jsdatepicker
demo
demo

Reputation: 6235

Set minimum z-index to jquery datepicker

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/

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

Upvotes: 0

Views: 712

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

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>

Upvotes: 1

Vixed
Vixed

Reputation: 3509

Simply add !important in your css file:

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

http://jsfiddle.net/q693qtdt/

Upvotes: 0

Related Questions