CODEWITHSUNDEEP
jquerycss
Shiladittya Chakraborty
Shiladittya Chakraborty

Reputation: 4408

CSS issue in JQuery date picker

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

Upvotes: 0

Views: 60

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

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);
    }
});

Upvotes: 2

Related Questions