Datetimepicker Calendar Is Not Open In Correct Position

I am using Eonasdan bootstrap datetimepicker in paramquery grid. From starting I have faced one problem, If I open datetimepicker, the calendar is hiding inside the grid. When I gi

Solution 1:

Try using widgetParent option from Datepicker $(".input-group.date").datetimepicker({ widgetParent: 'body'});

Now you can adjust positioning, widgetParent option allow you to display the widget in any container in the page.

Solution 2:

I faced a similar problem where my date element in a table cell clipped the widget. I could not use my date element as the widget's DOM parent, but I still wanted to use it as a visual positioning.

I've submitted a PR with code to handle this. I've added a new option: forceElementPosition. It allows DOM parenting by widgetParent, but positioning next to the input element.

https://github.com/Eonasdan/bootstrap-datetimepicker/pull/1647

Solution 3:

Please remove your overflow:hidden

.pq-gridtd.pq-grid-cell{overflow:hidden}

Replace this:-

.pq-gridtd.pq-grid-cell{overflow:visible}

Demo