引导 datepicker $(...).datetimepicker 中的错误不是函数

Question

我正在使用 mvc 在 angularjs 中创建一个网络应用程序，

我用的是bootstrap的datepicker，

代码

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

但我在运行应用程序时遇到此错误

未捕获的类型错误：$(...).datetimepicker 不是函数 在 HTML 文档。 （自分配任务：325） 在 l (jquery2.0.3.min.js:4) 在 Object.fireWith [as resolveWith] (jquery2.0.3.min.js:4) 在 Function.ready (jquery2.0.3.min.js:4) 在 HTMLDocument.S (jquery2.0.3.min.js:4)

这些是我的布局页面上的脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script> <!-- bootstrap-css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- //bootstrap-css -->
<!-- Custom CSS -->
<link href="~/css/style.css" rel='stylesheet' type='text/css' />
<!-- font CSS -->
@*<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>*@
<!-- font-awesome icons -->
<link rel="stylesheet" href="~/css/font.css" type="text/css" />
<link href="~/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<script src="~/js/jquery2.0.3.min.js"></script>
<script src="~/js/modernizr.js"></script>
<script src="~/js/jquery.cookie.js"></script>
<script src="~/js/screenfull.js"></script> <!-- charts -->
<script src="~/js/raphael-min.js"></script>
<script src="~/js/morris.js"></script>
<link rel="stylesheet" href="~/css/morris.css">
<!-- //charts -->
<!--skycons-icons-->
<script src="~/js/skycons.js"></script>
<!--//skycons-icons-->

出现错误是因为我使用了许多脚本，还是其他原因？

Answer 1

首先您需要包含bootstrap-datetimepicker.js（阅读docs），但它需要moment.js。

但是，如果您已经计划使用 angularjs，请考虑使用指令来初始化您的小部件，因为您应该在 angular way 中这样做。查看plnkr 以获得解释。

所以我们开始：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" integrity="sha256-Gn7MUQono8LUxTfRA0WZzJgTua52Udm1Ifrk5421zkA=" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js" integrity="sha256-SS5UPPXAM4HWVoFCt0tsx90VWhRf7cStU5kabObE8cw=" crossorigin="anonymous"></script>

<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">
            var initDatePicker = function () {
                $('#datetimepicker1').datetimepicker();
            };
          window.onload = initDatePicker;
        </script>
    </div>
</div>