Jquery-Ui Datepicker Change Z-Index

jquery-ui datepicker change z-index

Your JS code in the question doesn't work because jQuery resets the style attribute of the datepicker widget every time you call it.

An easy way to override its style's z-index is with a !important CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative; and z-index on the input element itself which will be automatically copied over to the Datepicker widget.

But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

Fiddle

​I created a deferred function object to set the z-index of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.

The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).

How to change jQuery UI Datepicker Z-Index value?

.ui-datepicker-div { z-index: 999999; }

or with js:

$(function () {
    $("input[id$='txtPreviousCutOff']").datetimepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 5
     });
     $("#dpimage6").click(function () {
        $("input[id$='txtPreviousCutOff']").datepicker("show")
    });
    $('.ui-datepicker-div').css('zIndex', 999999);
});

how to change z-index of datetimepicker on every click?

I have found something fixed code from http://xdsoft.net/ ,I just added destroy function is worked.

$(document).ready(function() {
$('.datetimepicker').on('click', function(e) {
    e.preventDefault();
    $(this).datetimepicker({
        dateFormat: "yy-mm-dd",
        showTimezone: false,
        maskInput: true,
        timeFormat: "HH:mm:ss"
    }).focus();
    $('#ui-datepicker-div').css("z-index", 9999); //this is once time work
    $(this).datetimepicker("destroy");//this is solved my problem
});

});

Jquery date picker z-index issue

Put the following style at the 'input' text element: position: relative; z-index: 100000;.

The datepicker div takes the z-index from the input, but this works only if the position is relative.

Using this way you don't have to modify any javascript from jQuery UI.

Datepicker : Datepicker on Modal (z-index)

You should try adding the date picker container inside the modal div. You could give the modal an id like this:

<div class="form-group" id="myModalWithDatePicker">
  <label for="start_date" class="control-label">Start Date</label>
  <div class="input-group date">
    <div class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </div>
    <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
  </div>
</div>

Then you can use the container option like the following:

$('#datepicker2').datepicker({
    autoclose: true,
    container: '#myModalWithDatePicker',
    format: 'yyyy-mm-dd'
});

Set minimum z-index to jquery datepicker

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>

Trouble with jQuery Dialog and Datepicker plugins

Old Answer

z-index (note the hyphen!) is the property that matters. Make sure you set it greater than the dialogue, and make sure you set it on the correct element. Here's how we do it:

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

API Change - April 17, 2010

In the CSS file for the date picker, find the .ui-datepicker item and change it:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

Using z-index: 9999 !important; worked in Firefox 3.5.9 (Kubuntu).

---

Related Topics