Date Picker hidden behind dialog

[Jón Arnar Briem]

I want to create a popup dialog which contains a date picker element. For this I want to use AUI Date Picker and followed instructions here https://docs.atlassian.com/aui/7.9.9/docs/date-picker.html

However when I click on the date picker textbox calendar pops up as shown here 

Upon closer inspection I noticed that the calendar is hidden behind the popup dialog and only briefly visible when the dialog is closed. Any suggestions on how to fix this?

An example html 

<div class="jira-dialog" style="height: 200px">

    <div class="field-group">
        <input class="aui-date-picker" type="date">
    </div>

</div>

and Js

AJS.$(".aui-date-picker").datePicker({'overrideBrowserDefault': true});

I'm trying this on Jira 7.10.2