Question

我有一个有效的jsfiddle例子：

根据这个例子，我正在尝试编写代码。

我的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sprSec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

</div>


</div>
</form:form>

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

但是当我开始它时，我看到通常的输入。

我错了什么？

P.S。

我注意到jquery版本有问题。如果我在jsfiddle上更改它 - 它不起作用（我看到的简单输入）并且当它返回时 - 它无论如何都不起作用。

更新

现在我有以下代码：

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sprSec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.0.2.js'></script>

    <script src='//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 () {
            $('#startDate').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="input-group-addon">
                                <span class=""></span>
                           </span>
        </div>
    </div>

</div>


</div>
</form:form>

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

它也不起作用。

Answer 1

如果你使用带有图标的input-group，你需要将选择器设置为容器div而不是输入

$(document).ready(function () {
    $('#startDateDiv').datetimepicker({
        format: 'LT'
    });
});

DatetimePicker和jquery版本不兼容

更新

1 个答案: