日期时间选择器。小部件不显示

Question

我正在尝试重复 jsfiddle 上日期选择器文档中的示例

我写了下面的html代码：

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

和以下 js:

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

但是当我启动它时，我看到了简单的输入：

demo

我忘记了什么？

P.S。我写了以下 html 但它不起作用

<html>
<head>
    <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"
          rel="stylesheet">
    <script src='//code.jquery.com/jquery-2.1.4.js'></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js'></script>

    <script src='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>


    <script type="text/javascript">
        //Настройка выборок для времени
        $(document).ready(function () {
            $('#startDateDiv').datetimepicker({
                format: 'LT'
            });

        });
    </script>

</head>
<body>

<div class="row-fluid main-content chose" style="padding: 20px 0 67px 0;">
    <form:form commandName="campaignBeanDto" id="addParams" method="POST">
    <div class="param-line">
            <div id="startDateDiv" class="input-append date add-params-date-div">

            <fmt:formatDate pattern='dd/MM/yyyy' type='date' value='${campaign.beginDate}' var="beginDate"/>
            <form:input path="beginDate" id="startDate" name="beginDate"
                        data-format="dd/MM/yyyy" type="text" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
                            </span>
           </div>
    </div>

</form:form>

</div>
</body>
</html>

我在控制台中没有看到任何错误，但我看到了简单的输入

Answer 1

您忘记包含 bootstrap.css 和 moment.js 个文件，

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js

here 是有效的 fiddle.

Answer 2

您忘记添加 moment.js。如果您清楚地阅读文档，它会提到 moment.js

Dev Guide

工作fiddle

日期时间选择器。小部件不显示

datetimepicker. widget doesn't show

javascript

jquery

twitter-bootstrap

datetimepicker