Bootstrap 4 и datetimepicker

26 декабря 2019 года #bootstrap#datetimepicker

Столкнулся с проблемой как заставить работать Bootstrap 4 и bootstrap-datetimepicker. Последний практически не поддерживается в последнее время и ждать обновления не имело смысла. Альтернатив практически нет для bootstrap-datetimepicker. Есть конечно Tempus Dominus, но мне почему-то внешний вид не очень понравился.

Покопавшись в интернете обнаружил вот что. Всё дело в том, что Bootstrap v.4 заменила "collapse in" на "collapse show". Поэтому datetimepicker и перестал работать как раньше.

Необходимо отредактировать файл bootstrap-datetimepicker.js (bootstrap-datetimepicker.min.js).

Находим:

?"collapse in":""
...
.find(".in")
...
.find(".collapse:not(.in)")
...
.addClass("in")

Заменяем на:

?"collapse show":""
...
.find(".show")
...
.find(".collapse:not(.show)")
...
.addClass("show")

Но на этом еще не всё. Boostrap 4 избавился от Glyphicons, поэтому bootstrap-datetimepicker отображался без иконок. Я для себя решил это таким способом — подружил с Font Awesome.

$("selector").datetimepicker({
    format: "DD.MM.YYYY HH:mm",
    locale: 'ru',
    icons: {
        time: "far fa-clock",
        date: "far fa-calendar-alt",
        up: "far fa-arrow-up",
        down: "far fa-arrow-down",
        previous: 'far fa-chevron-left',
        next: 'far fa-chevron-right',
        today: 'fa fa-camera',
        clear: 'fa fa-trash',
        close: 'far fa-minus-square',
    }
});

И для полной красоты пришлось переопределись немного CSS.

.bootstrap-datetimepicker-widget table th {
    height: 30px;
    line-height: 30px;
}

.bootstrap-datetimepicker-widget table td.day {
    height: 30px;
    line-height: 30px;
}

В итоге получилось практически как раньше — посмотреть можно на странице Конвертера времени.