Question

我相信遵循所有指示，但我无法让它发挥作用。 Firebug没有给我任何错误，我多次检查所有文件路径。我做错了什么？

（我实际上在这里找到了同样的问题，未答复： Can't make datepicker bootstrap to work）

这是我的JSfiddle

这是我的代码：

<html>
    <head>
        <title>date test</title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="bootstrap-datetimepicker.min.css"/>
    </head>
    <body>
        <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>
                <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
            </div>
        </div>    
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="moment.js"></script>
            <script type="text/javascript" src="transition.js"></script>
            <script type="text/javascript" src="collapse.js"></script>
            <script type="text/javascript" src="bootstrap.min.js"></script>
            <script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>
    </body>
</html>

Answer 1

JS

$(function () {
     $('.datetimepicker1').datetimepicker();
});

<强> HTML

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

注意：*我在jsfiddle中从外部资源中删除了collapse.js，它抛出了一些语法错误，你最后加载jquery library 2.1，我做了修正，已将id='datetimepicker1'分配给input框而非div *

View Working JSFiddle

Answer 2

在你的小提琴中，你没有引用jQuery库。

它适用于此更新的fiddle

Answer 3

检查我更新的Fiddle

你有两个问题：

1- jQuery 库缺失了 2- jsfiddle的 div Result与日期范围选择器按钮重叠，因此我添加了测试余量：

<div class='input-group date' id='datetimepicker1' style="margin-top: 100px;">

Bootstrap datetimepicker不起作用

3 个答案: