Bootstrap日期时间选择器无法正常工作

时间:2014-08-05 07:30:42

标签: twitter-bootstrap twitter-bootstrap-3 datetimepicker

我正在使用Bootstrap 3和Bootstrap datetimepicker:http://eonasdan.github.io/bootstrap-datetimepicker

但问题是它在我的项目中无效。

这是我的标记:

    <!--Load Bootsrap stylesheet  -->
    <link href="css/bootstrap.css" rel="stylesheet" />

    <!--Load Bootsrap-Datepicker stylesheet  -->
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" />

    <!--Load Fontawesome stylesheet  -->
    <link href="css/font-awesome.css" rel="stylesheet" />

    <!--Load Global js plugin -->
    <script src="js/jquery-2.1.1.js"></script>

    <!--Load moment js plugin -->
    <script src="js/moment.min.js"></script>

    <!--Load Bootsrap js plugin -->
    <script src="js/bootstrap.js"></script>

    <!--Load Bootsrap-Datepicker js plugin -->
    <script src="js/bootstrap-datetimepicker.js"></script>

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

    <form role="form">
        <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>
    </form>

1 个答案:

答案 0 :(得分:0)

像这样使用

<!--Load Bootsrap stylesheet  -->
<link href="css/bootstrap.css" rel="stylesheet" />

<!--Load Bootsrap-Datepicker stylesheet  -->
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet" />

<!--Load Fontawesome stylesheet  -->
<link href="css/font-awesome.css" rel="stylesheet" />

<!--Load Global js plugin -->
<script src="js/jquery-2.1.1.js"></script>

<!--Load moment js plugin -->
<script src="js/moment.min.js"></script>

<!--Load Bootsrap js plugin -->
<script src="js/bootstrap.js"></script>

<!--Load Bootsrap-Datepicker js plugin -->
<script src="js/bootstrap-datetimepicker.js"></script>

<form role="form">
    <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>
</form>

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

我刚刚在表单后移动了脚本标记。这必须奏效。