my datetimepicker is behind my JQuery-ui dialog
I have associated a link to this ChangeTime so when I click on the link the JQuery-UI Dialog dlgPassage
is opened. In the dialog dlgPassage I click on the img tag to bring up i datetimepicker
The datetimepicker is being displayed behind the dlgPassage. In this datetimepicker I can select both a date and a time.
I have downloaded this datetimepicker from some site.
Here is some code and markup
I need some suggestion how to bring the datetimepicker in front of my JQuery-UI dialog ?
I just tried to set z-index on the img tag but it had no effect.
function ChangeTime()
{
var idxToCloseItem = $('#dlgBooking').data('idxToCloseItem');
$('#dlgBooking').dialog("close");
$("#dlgPassage").dialog({
width: 600
});
}
$("#dlgPassage").dialog({
width: 600
});
<div id="dlgPassage" title="Passage" style="display:none">
<table>
<tr><td>Opening</td></tr>
<tr>
<td>
<input type="text" id="arrID" size="18"/>
<img src="images/cal.gif" style="z-index:999999999999999999999999" alt="" onclick="javascript:NewCssCal('arrID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
<td> </td>
<td>
<input type="text" id="depID" size="18"/>
<img src="images/cal.gif" style="z-index:999999999999999999999999" alt="" onclick="javascript:NewCssCal('depID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
</tr>
<tr><td> </td></tr>
<tr><td>Passage</td></tr>
<tr>
<td>
<input type="text" id="Text1" size="18"/>
<img src="images/cal.gif" style="z-index:999999999999999999999999" alt="" onclick="javascript:NewCssCal('arrID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
<td> </td>
<td>
<input type="text" id="Text2" size="18"/>
<img src="images/cal.gif" style="z-index:999999999999999999999999" alt="" onclick="javascript:NewCssCal('depID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
</tr>
<tr><td> </td></tr>
<tr><td>Closing</td></tr>
<tr>
<td>
<input type="text" id="Text4" size="18"/>
<img src="images/cal.gif" style="z-index:999999999999999999999999" alt="" onclick="javascript:NewCssCal('arrID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
<td> </td>
<td>
<input type="text" id="Text3" size="18"/>
<img src="images/cal.gif" style="z-index:999999999999999999999999" alt="" onclick="javascript:NewCssCal('depID','yyyyMMdd','arrow',true,'24')" style="cursor:pointer"/>
</td>
<td> </td>
<td><input id="Button1" type="button" value="Confirm" /></td>
</tr>
</table>
</div>