Issue with the salesforce datepicker when it is used in Modal window

I have come across this issue quiet often during project work where the SF date picker is displayed below the Modal window, which is very annoying. The reason for this issue is Z-Index for Modal window is higher then the Z-Index of SF date picker. The solution for this issue is include the SF date picker class in your page and increase the Z-Index to 9999 which is more then the Modal window Z-Index. refer the same code below:
 <apex:page>
<style type="text/css">
.datePicker {
    z-index: 9999;/*Changed this css property which was 100 prior*/
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 17em;
    background-color: #b7c6b2;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0;
    padding: 1px 1px 2px 2px;
}
</style>
<div class="popup">
<apex:inputfield value="{!AnyDateField}"/>
</div>
</apex:page>