CSS issue in JQuery date picker

Question

I am using below script for date picker in JQuery:

         $('#dob').datepicker({
            minDate: new Date(1900,1-1,1), maxDate: '-18Y',
            dateFormat: 'dd-M-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-100:-18'
        });

But Date picker goes under the table and only header portion is showing rest portion are hide into the table.

I have tried with below css which I putted in style.css but not solved.

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

How to solve this issue? Please help

Gaurav Aggarwal · Accepted Answer · 2016-08-08 12:04:04Z

2

Use z-index while calling the function like this

$('#dob').datepicker({
    minDate: new Date(1900,1-1,1), maxDate: '-18Y',
    dateFormat: 'dd-M-yy',
    changeMonth: true,
    changeYear: true,
    yearRange: '-100:-18',
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker-div').css({'position': 'relative', 'z-index': 99999999999999});
        }, 0);
    }
});

edited Aug 8, 2016 at 12:04

answered Aug 8, 2016 at 11:28

Gaurav Aggarwal

10.2k8 gold badges42 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shiladittya Chakraborty Over a year ago

I also need to add the parameter which I used in my posted example . How Can use those parameter with your method?

Ionuț Staicu Over a year ago

I'm not sure if this is the problem, but IE<9 (or 10?) doesn't know about values lower than 10ms on setTimeout.

Shiladittya Chakraborty Over a year ago

Due to this position absolute date picker goes below of the page

Gaurav Aggarwal Over a year ago

sry about the miss css should apply on .ui-datepicker-div. Try and tell me its working??

Shiladittya Chakraborty Over a year ago

Still not working. Still its showing only header of datepicker in all browser.

|

Collectives™ on Stack Overflow

CSS issue in JQuery date picker

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related