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

Question

我正在使用最新版本的4.17.47的Bootstrap-DateTimePicker 。

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

我还包括了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，则情况相同。

我做错了什么吗？

Answer 1

目前，Bootstrap-DateTimePicker 不支持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 个解决方案

解决方案1
1 已采纳 2018-09-04 09:21:26

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-09-04 09:21:26

解决方案1
1 已采纳 2018-09-04 09:21:26