Visualforce Datepicker position when using modal popups

This is a quick post to save sometime for people using modal popups with date fields in a visualforce page..

if the default datepicker that shows up when using apex:inputField for date fields is not rendering properly or if its been displayed behind the popup or in some random position, then don't break your head.. apply the below css in your page and it should work fine..

.datePicker { z-index:1151; position:fixed; }

z-index is to bring the datepicker in front of the popup.. use the number (1151 in this case) higher than the one used for the modal popup..

position:fixed is to align the datepicker next to the input field.

hope this helps and saves time for someone..