Jquery DataTables的Jquery DateRange选择器定位问题

Question

我正在使用依赖于jquery，jquery UI datepicker，date.js和jQuery UI CSS框架的jQuery-Plugin“ daterangepicker.jQuery.js”。

在我的页面上，我有上面的插件，它位于Jquery DataTables 1.10.4上方。

图片如下：

每当我单击输入文本框时，带有所有日期选项的插件就会呈现在DataTables下方，而不是在输入文本框下方。

我尝试将DataTables的z-index设置为999，将Rendered Date插件（类.ui-daterangepickercontain）的设置为9999，但是该插件未堆叠在DataTables（类.dataTables_wrapper上） ），并位于DataTables下方。

请告知我还能尝试什么？

代码：

JS

$(document).ready(function() {
    $('#dateRangePickerControl').daterangepicker({dateFormat: 'dd-M-yy'});
});

HTML

<div class="container">
<h4>Date range :</h4>
<div calss="mydatepicker">
    <input type="text" value="<?php echo date("d-M-y");?>" id="dateRangePickerControl" readonly/>
    <a class="btn btn-small btn-info" href="javascript:void(0)"  id="submitButton">Show Details</a>
</div>
<hr>
<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Qual</th>
            <th>Phone</th>
            <th>BV App No</th>
            <th>BV Date</th>
            <th>Details</th>
        </tr>
    </thead>
</table>
</div>