How to make the datepicker not go down?

Question

css

Question from a noob.
There is such a page

, the top two datepickers are displayed normally.
there was a need to create another datepicker on the fly by clicking on a table cell and display it there.
So far I've sketched the idea like this:

$('body').on('dblclick','.price-date-column',function(){
           var content = '<div class="input-group date"><input type="text" class="form-control input-price-date"></span></div>';
          $(this).html(content);
     var t =  $(this).find('input').datetimepicker({
          pickTime: false,
          format: 'MM-DD-YYYY'});
    //$('.bootstrap-datetimepicker-widget').addClass('blinnnnn');
  });

i.e. by double-clicking on a table cell, I generate an input, add it to the cell, and create a datepicker. Then I will also return the original view to the table on the fly, having received a new date value. Everything seems to be normal, BUT the datepicker created in this way is displayed FAR below in the process of working with it. Tried using widgetPositioning. No effect.
In general, I thought of adding my own class to ".bootstrap-datetimepicker-widget", where all styles (position on the page) are rigidly assigned, then after I finish working with the datepicker, I will delete it (this additional class) so that the rest of the datepickers , those on top were displayed correctly.
I don't really like the solution. And it's not at all clear what... How to win it?
Thanks for the qualified opinions, if any.

Answer 1

So, with difficulty raking the solutions proposed here, I propose my own))
After a variety of tricks, the easiest method of treatment, IMHO, is to add to the styles:

.bootstrap-datetimepicker-widget{
        top:auto!important;
    }