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

卡尔佩什·辛加拉

我正在使用最新版本 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,情况也是如此

有什么我做错了吗?

纳米比亚

目前 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Bootstrap DateTimePicker中禁用时间?

如何在 Bootstrap DateTimePicker 上允许 maxDate 和 minDate 相等?

如何在Bootstrap 3 datetimepicker中的特定日期禁用特定时间?

如何禁用bootstrap-dateTimepicker的选择功能?

如何在bootstrap-datetimepicker.js中将时间选择器设置为仅从上午8:30到晚上8:30设置时间?

如何在Bootstrap日期时间选择器中添加秒

Bootstrap DatetimePicker选择器问题

Bootstrap datetimepicker 默认时间

Bootstrap Datetimepicker设置日期

如何在Symfony上“安装” Bootstrap Datetimepicker?

如何在jQuery DateTimePicker控件中获取小时和分钟选择器

Bootstrap datetimepicker中的日期格式

如何使Bootstrap日期和时间选择器打开而不是顶部

如何在 angular-bootstrap-datetimepicker 中禁用标题和箭头?

如何使用Bootstrap-datetimepicker获取Unix时间戳

Bootstrap 3 DateTimePicker(eonasdan)-如何快速选择年份?(生日)

如何在 /bootstrap 4.6 应用程序中正确显示日期时间选择器?

明天日期Bootstrap datetimepicker

传递Bootstrap DateTimePicker的默认日期

Bootstrap datetimepicker 和 Laravel 时区

Bootstrap Datetimepicker /链接选择器无法正常运行

在Bootstrap Datetimepicker中更改方向

EditorTemplate 中的 Bootstrap 3 DateTimePicker

Bootstrap datetimepicker - 设置日期时间服务器端

如何隐藏Bootstrap日期选择器

如何使用 Bootstrap 日期选择器?

如何在多个动态创建的输入上使用Bootstrap Datetimepicker

在bootstrap-datetimepicker中设置默认时间

在Bootstrap 3 Datetimepicker中禁用将来的日期