Bootstrap datetimepicker不起作用

Question

你好，我的datetimepicker不能正常工作，我也不知道原因。 有人可以帮我这个吗？

这是链接

<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

这里是它在form的代码，但我认为不需要把它放在这里

<div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>

这是我的脚本

<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">

 $(function () {
                $('#datetimepicker1').datetimepicker();
            });
    </script>

这是输出

我的css文件夹

我的js文件夹

Answer 1

首先，要显示日期选择器，您需要在input上调用该函数。

$('#datetimepicker1 input').datetimepicker()

另外，请包含要显示的字形相关的css文件

Answer 2

也许尝试Bootstrap 3无法正确显示glyphicon图标不显示。 对我来说，它通过再次获取字体文件来解决，如用户体验的答案中所述

Answer 3

输入必须有id ='datetimepicker1' ，而不是div。

Answer 4

我的猜测是你在网站上加载HTML元素之前运行了javascript。

在此示例中，请注意脚本位于javascript使用的div之后。

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <!-- AFTER the datetimerpicker is loaded -->

        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

如果它来过，像这样：

<script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
</script>



<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>

javascript将在div加载之前运行，因此它不会找到id＃datetimepicker1。 从头部取出javascript，然后在datetimepicker之后粘贴它。

Answer 5

看起来你不见了

data-provide="datepicker"

按照说明@ https://bootstrap-datepicker.readthedocs.io/en/latest/

您是否有理由使用<span></span>而不是<div></div>

例如代码是

<div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div>

还有开发人员控制台中的任何错误？

Answer 6

本网站最好地使用Bootstrap 3日期和时间选择器

这是链接http://eonasdan.github.io/bootstrap-datetimepicker/

我也在github上为你做了一个例子，祝你好运。

这是链接https://github.com/elsayhsoft/Bootstrap-date-time-picker

最好的祝福。