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

Question

I am creating a web app in angularjs with mvc,

I used of the datepicker of bootstrap,

code

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

but i am getting this error while run the application

Uncaught TypeError: $(...).datetimepicker is not a function at HTMLDocument. (SelfAssignTask:325) at l (jquery2.0.3.min.js:4) at Object.fireWith [as resolveWith] (jquery2.0.3.min.js:4) at Function.ready (jquery2.0.3.min.js:4) at HTMLDocument.S (jquery2.0.3.min.js:4)

these are the script on my layout page

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

the error is coming because i used many scripts, or what else?

Answer 1

First you need to include bootstrap-datetimepicker.js (read docs ) but it requires moment.js .

But if you already plan to using angularjs consider to initialize your widgets by using directives, because that how you should do that in angular way . Check out that plnkr for explanation.

So here we go:

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