如何在 Bootstrap-DateTimePicker 中启用日期和时间选择器答案

【问题标题】：How to enable date and time picker in Bootstrap-DateTimePicker如何在 Bootstrap-DateTimePicker 中启用日期和时间选择器
【发布时间】：2019-02-09 03:08:44
【问题描述】：

我将这个Bootstrap-DateTimePicker 与最新版本的 4.17.47 一起使用。

我阅读了所有文档选项、函数和事件。

我还包括了 JS 和 CSS 的所有依赖项。

但是有些东西以某种方式无法正常工作。

<!doctype html>
<html lang="en">

<head>
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./moment.js"></script>
    <script type="text/javascript" src="./bootstrap.min.js"></script>
    <script type="text/javascript" src="./bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="./bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap-datetimepicker.min.css" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <input type='text' class="form-control" id='datetimepicker4' />
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker4').datetimepicker({
                        format: 'DD/MM/YYYY hh:mm',
                    });
                });
            </script>
        </div>
    </div>
</body>

</html>

关于显示日历部分或时间选择器部分的文档中有一个格式选项。

我想要的是显示两个部分，即日历和时间选择器。

但是当我设置format: 'DD/MM/YYYY' 时，它会正确显示日历部分。

当我设置format: 'hh:mm' 时，它会正确显示时间选择器。

但是当我将format:'DD/MM/YYYY hh:mm' 设置为启用这两个部分时，它不会显示日历部分，只显示时间选择器的图标，当我单击该图标时，它会打开时间选择器。如果我没有明确设置 format 选项并将其默认设置为 false，情况也是如此。

是不是我做错了什么？

【问题讨论】：

您是否从控制台收到了一些错误？我试过你的代码，我发现它可以正常工作jsFiddle
@nmbrphi 不，没有控制台错误。我认为您正在使用旧版本的引导程序和日期时间选择器。你的 bootstrap.min,js 是版本 3，而我使用的是版本 4。
这可能是问题所在，这个库是为 bootstrap 3 开发的，我没有看到对 bootstrap 4 的任何支持或更改。github project

标签： javascript bootstrap-datetimepicker eonasdan-datetimepicker

【解决方案1】：

目前 Bootstrap-DateTimePicker does not support Bootstrap 4。事实上，您的代码在 Bootstrap 3 中看起来不错。

<!doctype html>
<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <input type='text' class="form-control" id='datetimepicker4' />
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker4').datetimepicker({
                        format: 'DD/MM/YYYY hh:mm',
                    });
                });
            </script>
        </div>
    </div>
</body>

</html>

【讨论】：