Ввод даты и времени используя jquery плагин datepicker c bootstrap 4

Перепробовав много плагинов наткнулся на тот, у которого есть совместимость с Bootstrap 4 - это плагин Zebra Datepicker.

Рассмотрим использование плагина на примере формы бронирования номера. Ниже будут приведены коды HTML, CSS и JS для реализации данной задачи.

<form class="booking__form" action="" method="POST">
    <div class="row mx-0">
        <div class="d-flex py-3">
            <div class="form-group datepicker checkin">
                <label for="">Заезд</label>
                <input type="text" class="form-control" readonly>
            </div>
        </div>
        <div class="d-flex py-3">
            <div class="form-group datepicker checkout">
                <label for="">Отъезд</label>
                <input type="text" class="form-control" readonly>
            </div>
        </div>
        <div class="d-flex">
            <div class="input-group px-0">
                <input type="submit" class="form-control" value="Забронировать">
            </div>
        </div>
    </div>
</form>

Содержание файла стилей:

.booking__form {
    height: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
}
.booking__form .form-group {
    position: relative;
    width: 220px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.booking__form .form-group.hasDropdown {
    width: 150px
}

.booking__form .form-group:hover {
    cursor: pointer
}

.booking__form .form-group input {
    padding-top: 20px;
    height: calc(1.5em + 30px);
    border: none;
    background-color: transparent;
    font-weight: 600;
    font-size: 18px
}

.booking__form .form-group input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.booking__form .form-group input:hover {
    cursor: pointer
}

.booking__form .form-group span.form-control {
    padding-top: 20px;
    height: calc(1.5em + 30px);
    border: 0;
    font-weight: 600;
    font-size: 18px
}

.booking__form .form-group.datepicker::after,
.booking__form .form-group.hasDropdown::after {
    content: '';
    position: absolute;
    right: -1.5px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: rgba(0, 0, 0, 0.07)
}

.booking__form .form-group label {
    position: absolute;
    z-index: 5;
    left: calc(25px + .75rem);
    top: 2px;
    margin-bottom: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5)
}

.booking__form .form-group .custom-select {
    height: calc(1.5em + 30px)
}

.booking__form .form-group .dropdown {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
    -webkit-transition: opacity .2s, visibility .2s, margin .2s;
    -o-transition: opacity .2s, visibility .2s, margin .2s;
    transition: opacity .2s, visibility .2s, margin .2s;
    top: auto;
    margin-top: 0;
    bottom: 100%;
    -webkit-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1)
}

.booking__form .form-group .dropdown ul {
    padding-left: 0;
    margin: 0;
    list-style: none
}

.booking__form .form-group .dropdown li a {
    display: block;
    padding: 12px 30px;
    padding-left: calc(25px + .75rem);
    font-weight: inherit;
    color: inherit;
    text-decoration: none
}

.booking__form .form-group .dropdown li.selected {
    font-weight: 700;
    background-color: #ffd40d
}

.booking__form .form-group.show-dropdown .dropdown {
    opacity: 1;
    visibility: visible
}

.booking__form .form-group svg {
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 1;
    top: 50%;
    right: 30px;
    z-index: 5;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}
.booking__form input[type=submit].form-control {
    padding: .375rem .75rem;
    text-transform: uppercase;
    background-color: #ffd40d;
    border-radius: 0;
    font-weight: 700;
    height: 100%;
}
.datepicker .Zebra_DatePicker {
    bottom: 100%;
    top: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

Содержание для файла скриптов:

$(function() {
    $('.datepicker.checkin input').Zebra_DatePicker({
        format: 'd M Y',
        container: $(".datepicker.checkin"),
        months: 	['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'],
        days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
        show_select_today: 'Сегодня',
        lang_clear_date: 'Очистить',
        default_position: 'above',
        direction: true,
        onOpen: function(){
            let el = $(this).parents('.datepicker').children('.Zebra_DatePicker');
            $(el).css('left', '50%');
            $(el).css('bottom', '100%');
            $(el).css('top', 'auto');
        }
    });
    $('.datepicker.checkout input').Zebra_DatePicker({
        format: 'd M Y',
        container: $(".datepicker.checkout"),
        months: 	['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'],
        days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
        show_select_today: 'Сегодня',
        lang_clear_date: 'Очистить',
        default_position: 'above',
        direction: true,
        onOpen: function(){
            let el = $(this).parents('.datepicker').children('.Zebra_DatePicker');
            $(el).css('left', '50%');
            $(el).css('bottom', '100%');
            $(el).css('top', 'auto');
        }
    });
});

Получилась вот такая форма заявки: