Позиционирование пользовательской кнопки закрытия загрузчика datetimepicker

Question

Я не знаю, правильно ли я использую заголовок для этой проблемы.

У меня есть 2 входа, которые запускают загрузчик даты начальной загрузки, один для календаря, а другой для времени.

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

Datetimepicker запускается таким образом

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

Я изменяю x по умолчанию, как предложено в этом сообщении Как добавить закрывающий текст в загрузчик datetimepicker?

Кнопка закрытияправильно отображается в нижней части контейнера календаря чуть ниже календаря.Но в контейнере времени кнопка закрытия отображается в самом верху контейнера чуть выше селекторов времени.

Как мне переместить кнопку закрытия внутри контейнера времени чуть ниже селектора времени?

Answer 1

Я решил это с помощью css и flex.

Не проверял, работает ли он во всех браузерах, но пока это лучшее, что я могу сделать.

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