jquery-ui datepicker change z-index

user_359890 0
Viewed 107176

The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.

I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.

see the ugly circle covering july 6th below...

enter image description here

the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.

I've already tried 

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

and 

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

but it seems the z-index get overwritten each time the datepicker is launched.

any help is appreciated!

datepicker jquery-ui css jquery javascript
9 Answers

In my case nothing worked. I needed to add the z-index to the input type that has the datepicker.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
user_9628960

This is for Bootstrap datetimepicker

If your datepicker is hiding because of scroll appears in your div use:

overflow-x: visible !important;
overflow-y: visible !important;

in css of whole div that contain your datepicker and other item such as 

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
user_96478920

Add this:

    $(document).ready(function()
    {
      $('#datepickers-container').css('z-index', 999999999);
    };
user_68120670
Related