Positioning custom close button bootstrap datetimepicker

Question

I dont know if am using the right title for this issue.

I have 2 input that triggers a bootstrap datepicker, one for the calendar and the other for the time.

<input type="text" class="form-control" placeholder="date" id="surveyDatepicker">                       
<input type="text" class="form-control" placeholder="time" id="surveyTimepicker">

Datetimepicker is initiated this way:

$('#surveyDatepicker').datetimepicker({
    showClose: true,
    format: 'L',
    icons: {
       close: 'closeText'
    },
    debug: true
});

$('#surveyTimepicker').datetimepicker({
    format: 'LT',
    debug: true,
    showClose: true,
    icons: {
       close: 'closeText'
    }
});

I change the default x as suggested in this post How to add close text to datetimepicker bootstrap?

The close button is displayed correctly at the bottom of the calendar container just below the calendar.

But in the time container, the close button is displayed at the very top of the container just above the time selectors.

How can I move the close button inside the time container just below the time selector?

Answer 1

I solved this with css and flex.

Havent check if its working in all browsers but so far is the best i can do.

.bootstrap-datetimepicker-widget {
    ul {
        display: flex;
        flex-direction: column;
        li.picker-switch.accordion-toggle {
            order: 2;
        }
    }
}