Jquery date picker z-index issue

Question

I have a slideshow div, and I have a datepicker field above that div.

When I click in the datepicker field, the datepicker panel show behind slideshow div.

And I have put the script as:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

So I cannot change the z-index of datepicker in CSS. The z-index of datepicker which the script is generating is 1 and my slideshow div(also calling thru googleajaxapi) z-index is 5. So I guess I have to increase the z-index of date picker greater than 5. So is there any way to increase it ?

Someone can help me?

Warring

Here is the solution #11533661 – Bastinado

Answer 1

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.

Cynthia

Problem with this is that your input will display above other elements, this is rarely the desired effect – Kingsbury

Is that supposed to work when datepicker is bound to a span? – Cutinize

position : relative is not acceptable and does not work in my situation. the solution bellow works fine. – Centriole

this is not working on IE 11 browser. Is this browser specific? – Interosculate

This solution, while it does work, is not valid for all situations. Best is to overide with a single line of CSS '.ui-datepicker{ z-index: 9999 !important;}' – Hobbs

It worked for me. I had an issue with IE11: my datepicker were rendered under the overlay containing the input fields. This solution resolved everything. – Dentist

I've use : $('.picker').appendTo('body'); – Steal

For appended bootstrap input fields using 'input-group' this does work but needs to be on the parent <div> that has the input-group class – Lippi

Answer 2

simply in your css use '.ui-datepicker{ z-index: 9999 !important;}' Here 9999 can be replaced to whatever layer value you want your datepicker available. Neither any code is to be commented nor adding 'position:relative;' css on input elements. Because increasing the z-index of input elements will have effect on all input type buttons, which may not be needed for some cases.

Woehick

I had to use datepicker rather than ui-datepicker – Hermilahermina

JavaScript still uses discontinuous z-indexes, arbitrary stacking contexts, and has cross-browser compatibility issues in 2016? ActionScript 3 FTW (a decade ago, and still today). – Plankton

still works, incorporated to a WordPress site just added in theme style.css – Daria

Answer 3

worked for me

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Anadiplosis

Answer 4

Based in marksyzm answer, this worked for me:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Infecund

But this only affects the input and not the datepicker overlay? – Britzka

I'm using this example jqueryui.com/datepicker which it doesn't use an icon for the datepicker. With this solution I didn't have problems with the rest of web components. – Infecund

Answer 5

I have a dialog box that uses the datepicker on it. It was always hidden. When I adjusted the z-index, the field on the lower form always showed up on the dialog.

I used a combination of solutions that I saw to resolve the issue.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

The before show ensures that datepicker always is on top when selected, but the onClose ensures that the z-index of the field gets reset so that it doesn't overlap on any dialogs opened later with a different datepicker.

Tenancy

This solution is great and solved my problem. But edit it a little bit on "onClose" part. I put $(this) instead of $('.ui-datepicker'). So, it will set z-index:0 to the "this input" instead of all inputs with ui-datepicker class. – Ataxia

Answer 6

Adding to Justin's answer, if you're worried about untidy markup or you don't want this value hard coded in CSS you can set the input before it is shown. Something like this:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Note that you cannot omit the "position": "relative" rule, as the plugin either looks in the inline style for both rules or the stylesheet, but not both.

The dialog("widget") is the actual datepicker that pops up.

Britzka

This problem should be addressed in the JqueryUI scripts and be set to prevent overlays by default. Majority of usage cases would never want any input overlaying the calendar input capabilities. If there is a need to have input (or other elements) overlay the calendar, then a solution like this should be used. Having said that, @Britzka would be the best solution IMO as you would apply it only when needed. – Foreplay

Answer 7

I had this issue i solved by using on click:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Outstretched

This solution work perfectly on popup window for me. Thanks ! – Angelineangelique

Answer 8

See here: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Buckels

Answer 9

I have a page where the datepicker was on top of a datatables.net tabletools button. The datatables buttons had a higher z-index than the individual datepicker date buttons. Thanks to Ronye's answer I was able to resolve this problem by using position: relative; and z-index: 10000. Thanks!

Eurasian

Answer 10

This happened to me when I was missing the theme. Make sure the theme exists, or perhaps redownoad the theme, and reupload it to your server.

Roselynroseman

Answer 11

That what solved my problem:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

Benzene

Answer 12

In fact you can effectively add in your css .ui-datepicker{ z-index: 9999 !important;} but you can modify jquery-ui.css or jquery-ui.min.css and add at the end of the ui-datepicker class z-index: 9999 !important;. both things work for me (You only need one ;-))

Gove

Answer 13

I had to

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}

Cabretta

Answer 14

I had this issue as well, since the datepicker uses the input's z-index, I added the following css

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Just take the rule that applies to yours, either by parent id, class, or in my case a bootstrap dialog, using their input-group and form-control.

Beestings

Answer 15

30 puls try
Last I get it. Working

.modal {
    z-index: 1040; // Bootstrap 3 Model
}
.ui-datepicker {
    z-index: 1041 !important;
}

Jacquelynejacquelynn

Answer 16

The problem for me was that the datepicker takes the z-index from the closest parent which has a z-index and then adds +1. So let say the closest one with z-index is 1000 so the datepicker gets 1001.

But! When you still have a parent element with an even higher z-index then you will have a problem!

<div style="z-index: 2000">
    <!-- The highest parent has 2000 -->
    <div style="z-index: 1000">
        <!-- the closest parent has 1000 -->
        <input class"datepicker" />
        <!-- your datepicker popup will get 1001 -->
        <!-- but that is too low to go over your outer parent's z-index of 2000 -->
    </div>
</div>

So it is actually a problem with the z-indexes of your parents.

Bingo