Bootstrap 日期时间选择器现在显示日历

Question

最近我开始升级我用普通 php/javascript 编写的旧项目之一以开始使用 Laravel。我开始配置一些基本的东西，比如 select2、tinymce、date(time)picker，但我遇到了困难。日历（日期）部分在默认模式下无法正常显示。

这是我的 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 fiddle，其中包含错误和解决方法：https://jsfiddle.net/Reflexecute/v6uzL2r9/

解决方法（sideBySide：true => 并排视图）目前有效，但我更喜欢默认视图，因为并排视图没有清晰的今天和关闭按钮。

有没有人有什么建议，因为我能找到的所有 errors/fixes 都与现在显示有关，但没有修复它。

Answer 1

通过将 toolbarPlacement 设置为 "top" 或 "bottom".

，您可以在使用并排时强制显示带有关闭按钮的工具栏

尝试toolbarPlacement: "bottom"

Bootstrap 日期时间选择器现在显示日历

Bootstrap datetimepicker now showing calendar

jquery

bootstrap-4

bootstrap-datetimepicker

eonasdan-datetimepicker