Question

我试图从jsfiddle上的datepicker文档重复示例

我写了以下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

您忘了添加moment.js。如果您清楚地阅读文档，则提及moment.js

Dev Guide

工作fiddle

Answer 2

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

here是工作小提琴。

的DateTimePicker。小部件不显示

2 个答案: