angular-daterangepicker不能與angularJs一起工作

我一直在嘗試在我的一個應用程序中使用angular-daterangepicker。我下面這個鏈接：angular-daterangepicker不能與angularJs一起工作

https://github.com/fragaria/angular-daterangepicker

安裝該模塊。
寫入控制器的依賴關係。
使用腳本標記在.html/.ejs文件中添加依賴項。

<script src="jquery/dist/jquery.min.js"></script> 
<script src="jquery-ui/jquery-ui.js"></script> 
<script src="angular/angular.min.js"></script> 
<script src="moment/moment.js"></script> 
<script src="angular-daterangepicker/bootstrap- daterangepicker/daterangepicker.js"></script> 
<script src="angular-daterangepicker/js/angular-daterangepicker.js"></script> 
<link rel="stylesheet" href="angular-daterangepicker/bootstrap-dist/css/bootstrap.css"/> 
<link rel="stylesheet" href="angular-daterangepicker/bootstrap-daterangepicker/daterangepicker.css"/> 

$scope.datePicker.date = {startDate: null, endDate: null}; //in controller if i use this i get error (2) 
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" />

錯誤：

1) TypeError: el.daterangepicker is not a function

2) TypeError: Cannot set property 'date' of undefined

如何擺脫這種錯誤的？

來源

2017-01-23 Tush Bedva

這是工作的例子 - ü需要下載，包括「角daterangepicker.min.js」這個文件從https://github.com/fragaria/angular-daterangepicker

<head> 
    <meta charset="utf-8"> 
    <title>Daterange picker example</title> 

    <!-- bower:css --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css" /> 
    <!-- endbower --> 

</head> 

<body> 
    <!-- bower:js --> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-messages.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.js"></script> 
    <!-- endbower --> 

    <script src="angular-daterangepicker-master/js/angular-daterangepicker.min.js"></script> 

<div class="container"> 
    <h1>Daterange picker example</h1> 

    <div class="row"> 
     <div class="col-md-6" ng-controller="TestCtrl"> 
      <form name="dateForm" class="form-horizontal"> 
       <div class="form-group"> 
        <label for="daterange1" class="control-label">Simple picker</label> 
        <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" 
          ng-model="date" required/> 
       </div> 
     </form> 

      <div class="row"> 
       <h4>Model:</h4> 
       <div class="col-md-12 well"> 
        <label>Date range:</label><br> 
        {{date | json}}<br> 
        <label>Single date:</label><br> 
        {{singleDate | json}}<br> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 


<script> 
exampleApp = angular.module('example', ['ngMessages', 'daterangepicker']); 
exampleApp.controller('TestCtrl', function($scope) { 
    $scope.date = { 
     startDate: null, 
     endDate: null 
    }; 


}); 

angular.bootstrap(document, ['example']);</script> 

</html>

來源

2017-01-23 08:48:22 IftekharDani

謝謝!!但即使進行上述更改，它仍顯示相同的錯誤！ @lftekharDani –

它在示例應用程序中工作，但它不在我的web應用程序中工作！我無法使用angular.bootstrap，因爲我通過ui路由器進行路由。但仍然很有幫助。所以批准....謝謝 –

angular-daterangepicker不能與angularJs一起工作

回答

相關問題