my datetimepicker is behind my JQuery-ui dialog

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>&nbsp;</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>&nbsp;</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>&nbsp</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>&nbsp;</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>&nbsp</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>&nbsp</td>
            <td><input id="Button1" type="button" value="Confirm" /></td>
         </tr>
       </table>
    </div>