DatePicker on modal not displaying

olson2334 commented 11 years ago

Hello,

I am using your datepicker with a bootstrap modal and I cannot get the calendar to display. I looked at issue #325 and applied the 2 lines that were changed. Prior to applying the lines nothing would happen in the modal for those elements i want to have datepicker displayed. After I applied the 2 line changes I am guessing the datepicker must be displaying off the modal some place as the modal applies both vertical and horizontal scrolls.

I did download the latest version but still have the same issue. Anyone have a fix for this by chance?

Thanks.

prior to 2 applying the 2 lines in issue 325:

after applying and trying to active datepicker:

olson2334 commented 11 years ago

Anyone have any idea how to get this to work?

olson2334 commented 11 years ago

Here is a screen of the actual calendar. Not sure why it is putting it down here. This occured when i clicked on InActive Date 's textbox.

phihu commented 11 years ago

I had the same problem. It can be solved by changing the datepicker's css z-index property (and changing it back to "auto" if not displayed within a modal). My (not very elegant) solution was to add a function triggered with the on "show" event:

$('#myElement').datepicker(options).on( 'show', function() { var modal = $('#myElement').closest('.modal'); var datePicker = $('body').find('.datepicker'); if(!modal.length) { $(datePicker).css('z-index', 'auto'); return; } var zIndexModal = $(modal).css('z-index'); $(datePicker).css('z-index', zIndexModal + 1); }

olson2334 commented 11 years ago

Thanks for the reply and sorry for it taking to long to get back to this. I still can't seem to get this to work.

I gave this a try and for some reason modal.length always equals 1. so it sets the z-index to 1051. I tried changing zIndexModal+1 to auto but it is still setting the calendar incorrectly. What am i missing here?

Feuda commented 11 years ago

I have the same question now

Feuda commented 11 years ago

@olson2334 hi , i solved it by adding some style to my bootstrap_and_overide.css.scss, whatever, just overide the default bootstrap style:

.dropdown-menu { top: 43%; }

in default, the top value is 100%, you can adjust it by hand.

hope it works or if there's better solution, call me

Feuda commented 11 years ago

@olson2334 sorry, the above solution not so good, it has influence to other element, because i modifed the global .dropdown-menu class, so i make a little change:

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom { top: 43%; }

this works well

olson2334 commented 11 years ago

@Feuda Thanks for the reply. Boy, i tried to apply that but it didn't seem to have any affect on my end. Was there anything else you had to do by chance?

Feuda commented 11 years ago

@olson2334 make sure that your datepicker element has no float parent otherwise do as aboves, or you can try to display only one datepicker on the page, see how it works, for the worst, adjust it with the firebug.

ghost commented 11 years ago

I have the same problem. Datepicker works just fine in individual page but doesn't show up correctly inside a modal.

trying the 43% solution but it doesn't sound good to have a hardcoded value.

any other solution yet?

PS: My problem isn't the z-index, the calendar displays far above the modal and its z-index is greater than modal's.

Also, my modal is loaded with a remote link so I have to call .datepicker() on the input field again when document finishes loading, any idea how to fix this btw?

joshkamau commented 11 years ago

i solved it by adding the following on css .datepicker {z-index: 1151 !important ;}

glamrock commented 11 years ago

When used in conjunction with Flat-ui, there are conflicts starting around line 2330 of flat-ui.css and ending around line 2538.

nehabajoria commented 11 years ago

I am also facing the same issue as DatePicker on modal not displaying drop down for change year and month.

insidelogic commented 10 years ago

Great @fadomire , works like a charm, thanks!

ismailansari commented 10 years ago

I've tried all above solution but failed then i got this solution on StackOverflow http://stackoverflow.com/questions/12978254/twitter-bootstrap-datepicker-within-modal-window

I recommend you look at your bootstrap CSS and JS. Your modal is being set at a very high z-index value (99999). I set it greater than this value and works fine for me try it youself.

ismailansari commented 10 years ago

After fixing this issue i have another issue that date-picker wasn't hiding after selecting date in short this product is a waste of time. Use this it works fine and also have time picker that can be disabled / enabled http://eonasdan.github.io/bootstrap-datetimepicker/

moazam1 commented 10 years ago

@ismailansari You should respect developer's efforts. You can't complain for free stuff. If you have any problem with this plugin then please create the issue rather posting negative remarks for such beautiful effort.

P.s. I am having the same issue

fadomire commented 10 years ago

@moazam1 your right :)

did you tried the pull request i made few comments back ?

ismailansari commented 10 years ago

Hi, I apologized from heart. i was very tense that time as deadline was tough and this issue was creating negative impact on our app client was unhappy so it happened.

Date: Fri, 14 Feb 2014 09:30:57 -0800 From: notifications@github.com To: bootstrap-datepicker@noreply.github.com CC: ismail.ansari@barqsol.com Subject: Re: [bootstrap-datepicker] DatePicker on modal not displaying (#464)

@ismailansari You should respect developer's efforts. You can't complain for free stuff. If you have any problem with this plugin then please create the issue rather posting negative remarks for such beautiful effort.

P.s. I am having the same issue

— Reply to this email directly or view it on GitHub.

ismailansari commented 10 years ago

Hi, em sorry for my bad comment. I'll check it later thanx

Date: Fri, 14 Feb 2014 09:36:51 -0800 From: notifications@github.com To: bootstrap-datepicker@noreply.github.com CC: ismail.ansari@barqsol.com Subject: Re: [bootstrap-datepicker] DatePicker on modal not displaying (#464)

@moazam1 your right :)

did you tried the pull request i made few comments back ?

— Reply to this email directly or view it on GitHub.