eternicode/bootstrap-datepicker — pull request #876 by mjomble (2014-03-30 21:13:13+00:00)
Title: z-index fix for Bootstrap modal

(My environment: Chrome 33, Windows 7)

I ran into a z-index issue when using the date picker on a Bootstrap Modal - http://getbootstrap.com/javascript/#modals

As I found out, the problem is that datepicker only looks at the closest parent element with a z-index, which assumes that deeper elements always have higher z-indexes.

But in case of Bootstrap Modal, there's a div with z-index 1050 that contains a div with a z-index value of the string "0". And this inner div causes the date picker to get a z-index of 10, which gets rendered behind the modal with z-index 1050.

My proposal is to find the maximum z-index among the parents, regardless of their order, and add 10 to that. This correctly identifies 1050 as the highest z-index and assigns the date picker a z-index of 1060, which fixes the rendering.

Example:
https://dl.dropboxusercontent.com/u/3110371/datepicker-zindex/datepicker-zindex.zip

Online version:
https://dl.dropboxusercontent.com/u/3110371/datepicker-zindex/test.html
https://dl.dropboxusercontent.com/u/3110371/datepicker-zindex/test-fixed.html

Note: there is a different fix for a similar issue here: https://github.com/eternicode/bootstrap-datepicker/pull/829

But it's not as generic and doesn't work in this scenario because the string "0" is not strictly equal to the number 0.

These two pull requests are not compatible - approving this one would mean rejecting the other one. But it should solve both problems.