Question

最近，我开始升级用普通php / javascript编写的旧项目之一，以开始使用Laravel。我开始配置一些基本的东西，例如select2，tinymce，date（time）picker，这是我遇到的问题。日历（日期）部分以某种方式无法在默认模式下正确显示。

这是我的用于配置datetimepicker的javascript和html代码。

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 =>并排视图）目前可以使用，但是我更喜欢默认视图，因为并排视图没有“ clear”，“今天”和“关闭”按钮。

有人有建议吗，因为我能找到的所有错误/修复都与现在显示的内容有关，而没有修复。

Answer 1

通过使用sideBySide，可以通过将toolbarPlacement设置为“ top”或“ bottom”来强制使用关闭按钮显示工具栏。

尝试toolbarPlacement: "bottom"

Bootstrap DateTimePicker现在显示日历

1 个答案: