Question

我正在将此Bootstrap-DateTimePicker与最新版本的4.17.47一起使用。

我阅读了所有文档选项，功能和事件。

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

但是某种方式无法正常工作。

const { Schema } = require('mongoose');
const db = require('./db.js');
const chatUser = new Schema({
    profileID: String,
    fullName: String,
    profilePic: String
});
const userModel = db.model('chatUser', chatUser);
module.exports = { userModel };

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

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

但是当我设置<!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 选项并将其默认设置为 false ，则情况相同。

我在做错什么吗？

Answer 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>

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

1 个答案: