Проблема позиционирования в Jquery DateRange с помощью Jquery DataTables

Question

Я использую jQuery-плагин "daterangepicker.jQuery.js", который зависит от jquery, jquery UI datepicker, date.js, jQuery UI CSS Framework.

На моей странице есть плагин выше, которыйрасположен над таблицей данных Jquery 1.10.4.

Изображение, как показано ниже:

Всякий раз, когда я щелкаю по текстовому полю вводаплагин со всеми параметрами даты отображается ниже DataTables, а не под текстовым полем ввода.

Я попытался установить z-index для DataTables равным 999 и Rendered Date Plugin (класс .ui-daterangepickercontain) до 9999, но плагин не размещен над таблицами данных (класс .dataTables_wrapper) и расположен ниже таблиц данных.

Посоветуйте, пожалуйста, что еще можно попробовать?

Код:

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>