Datetimepicker calendar is not open in correct pos

Question

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 given the css condition

.dropdown-menu {
position: fixed;
}

it is working. The calendar is visible clearly but it is not open in a correct place. After given "position:fixed", If I click picker icon the calendar is open in right-top of the grid or right-bottom of the grid. It is not open in an exact place. How can I resolve this?

Answer 1

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

Answer 2

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.

Answer 3

Please remove your overflow:hidden

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

Replace this:-

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

Demo