Bootstrap datetimepicker issue instide a table-responsive class - html

Question

I am using this (https://github.com/Eonasdan/bootstrap-datetimepicker) Date and time picker for my website, and when you open the datetime picker in a table-responsive class it does not show the date picker on top the table unless in the css you add .table-responsive { overflow:visible !important } in the css. Its all well and good doing this, but then when you shrink the screen or use it on a mobile / tablet, the table is no longer responsive and hangs off the side of the screen.
Please see this (https://jsfiddle.net/daza110/6abxn644/3/) fiddle which shows it opening correctly until you shrink the screen.
And please see this (https://jsfiddle.net/daza110/6abxn644/4/) fiddle which shrinks the table correctly, but does not show the calendar properly.
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-hover table-striped text-center bgwhite" id="accountTable">
<thead>
<tr>
<th class="col-sm-2">Debt Ref</th>
<th class="col-sm-2">Due Date</th>
<th class="col-sm-2">Amount Paid</th>
<th class="col-sm-2">Account</th>
<th class="col-sm-2">Reconcile Date</th>
</tr>
</thead>
<tbody>
<tr class="armitage">
<td>
<div>NOR087-DAN052</div>
</td>
<td>
<div>05/01/2016</div>
</td>
<td>
<div>180.00</div>
</td>
<td>
<div class="col-sm-12">Paralegal (951)</div>
</td>
<td>
<div class="col-sm-12">
<input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Jquery
jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
format: "DD/MM/YYYY"
});
UPDATE
I hacked this but it isnt nice, I added a PHP function that attaches a DatePicker and then did the following jquery code, this removes the table-responsive and adds a temp class on show then on hide removes temp class and adds the table-responsive again:
function attachDatePick($fieldId)
{
?>
<script type="text/javascript">
jQuery(function()
{
jQuery('#<?echo $fieldId;?>').datetimepicker().on('dp.show',function()
{
jQuery(this).closest('.table-responsive').removeClass('table-responsive').addClass('temp');
}).on('dp.hide',function()
{
jQuery(this).closest('.temp').addClass('table-responsive').removeClass('temp')
});
});
</script>
<?
}

Answer 1

I don't understand too much what you need but is maybe this?
.table-responsive {
overflow-x: inherit;
}
See in this fiddle

Answer 2

easy way is setting position: static for datepicker wrapper. For instance
<td>
<div class="col-sm-12">
<input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
</div>
</td>
you can set .col-sm-12 {position: static}

Answer 3

I haven't found any answer about this question that really pleases.
So I adapted a another code for bootstrap dropdown with same problem inside .table-responsive
below is the main code, that I put on window:
window.setDatapickerEvents = ($parentElement) => {
$($parentElement).on('dp.show', function (e) {
const $e = $(e.target);
const $input = $e.find('input').first();
const $btn = $e.find('span.input-group-addon').first();
const $dropdownMenu = $e.find('.dropdown-menu');
const eOffset = $e.offset();
const btnWidth = $btn.outerWidth();
const inputWidth = $input.outerWidth();
const dropdownWidth = $dropdownMenu.outerWidth();
const dropdownHeight = $dropdownMenu.outerHeight();
$('body').append($dropdownMenu.detach());
$dropdownMenu.css({
'top': eOffset.top - dropdownHeight,
'left': eOffset.left + inputWidth + (btnWidth / 2) - dropdownWidth + 20,
'width': dropdownWidth,
'height': dropdownHeight,
});
});
$($parentElement).on('dp.hide', function (e) {
const $e = $(e.target);
const $dropdownMenu = $e.find('.dropdown-menu');
$e.append($dropdownMenu.detach());
$dropdownMenu.hide();
});
}
And to enable it inside scripts tag in your page
setDatapickerEvents('.table-responsive');
Before - Problem
After - Resolved
I hope it helps anyone