Bootstrap datetimepicker теперь показывает календарь - PullRequest
Новая
       110

Bootstrap datetimepicker теперь показывает календарь

0 голосов
/ 16 ноября 2018

Недавно я начал обновлять один из моих старых проектов, написанных на простом php / javascript, чтобы начать использовать Laravel. Я начал настраивать некоторые базовые вещи, такие как select2, tinymce, указатель даты (времени), и вот где я застрял. Каким-то образом часть календаря (даты) не отображается должным образом в режиме по умолчанию.

Вот мой javascript и html-код для настройки datetimepicker.

Javascript: 

$(function() {
    $('input.date-time-picker#picker1').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        icons: {
            clear: 'fa fa-trash fa-fw',
            close: 'fa fa-times fa-fw',
            date: 'fa fa-calendar fa-fw',
            down: 'fa fa-chevron-down fa-fw',
            next: 'fa fa-chevron-right fa-fw',
            previous: 'fa fa-chevron-left fa-fw',
            time: 'fa fa-clock-o fa-fw',
            up: 'fa fa-chevron-up fa-fw',
            today: 'fa fa-calendar-times-o fa-fw'
        },
        /* sideBySide: true, */
        showClear: true,
        showClose: true,
        showTodayButton: true,
    });

    $('input.date-time-picker#picker2').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        icons: {
            clear: 'fa fa-trash fa-fw',
            close: 'fa fa-times fa-fw',
            date: 'fa fa-calendar fa-fw',
            down: 'fa fa-chevron-down fa-fw',
            next: 'fa fa-chevron-right fa-fw',
            previous: 'fa fa-chevron-left fa-fw',
            time: 'fa fa-clock-o fa-fw',
            up: 'fa fa-chevron-up fa-fw',
            today: 'fa fa-calendar-times-o fa-fw'
        },
        sideBySide: true,
    });
});

HTML: 

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Datetimepicker error</title>
    <meta name="description" content="Bootstrap 4 datetimepicker error">
    <meta name="author" content="Reflexecute">
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Wrong
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
                            <input type="text" name="date-time-picker" id="picker1" class="form-control date-time-picker">
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Sidebyside workaround
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
                            <input type="text" name="date-time-picker" id="picker2" class="form-control date-time-picker">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Вот скрипта js с ошибкой и обходным путем: https://jsfiddle.net/Reflexecute/v6uzL2r9/

Обходной путь (sideBySide: true => вид рядом) работает, но я предпочитаю вид по умолчанию, так как вид рядом не имеет кнопок очистки, сегодня и закрытия.

Есть ли у кого-нибудь предложения, потому что все ошибки / исправления, которые я мог найти, связаны с тем, что теперь отображаются, а не исправили.

1 Ответ

0 голосов
/ 16 ноября 2018

Вы можете заставить панель инструментов с помощью кнопки закрытия отображаться, когда используется usBideSide, установив toolbarPlacement в «top» или «bottom».

Try toolbarPlacement: "bottom"

...