Thought of answering my own question. The problem resolves when I navigate to another page and come back again. Then the dialog closes properly everytime. So I add this code before all jquery mobile library:-
$("#firstLoad").bind("pagecreate",function()
{
$.mobile.changePage("#selectDates");
});
and then add a fake jquery mobile page like this :-
<div id="firstLoad" data-theme="c" data-role="page" >
<!-- <div id="firstLoadHeader" data-role="header">
<h1>Welcome</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
<div id="footerSelectDates" data-role="footer">
<h1>Travel Gateway</h1>
</div> -->
</div>
So my actual page that I want to show comes after this. :-
<div id="selectDates" data-theme="c" data-role="page">
<div id="headerSelectDates" data-role="header">
<h1>Select Dates</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
</div>