2017-05-31 8 views
0

hereから角度jsの日付ピッカーを実装しようとしていますが、エラーが発生しました。エラーメッセージを理解していません。何が間違っていますか?ライブラリファイルがないか、構文エラー?angularjs dateピッカーの実装エラー

var myApp = angular.module('myApp',['ui.bootstrap']); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.list = [ 
 
    {"eid":"10","ename":"nam1"}, 
 

 
    {"eid":"20","ename":"nam2"}, 
 

 
    {"eid":"30","ename":"nam3"}, 
 

 
    {"eid":"40","ename":"nam4"} 
 
    ]; 
 

 

 

 

 

 
    
 
//date picker 
 
    $scope.open = function($event) { 
 
    $event.preventDefault(); 
 
    $event.stopPropagation(); 
 

 
    $scope.opened = true; 
 
    }; 
 

 
    $scope.dateOptions = { 
 
    formatYear: 'yy', 
 
    startingDay: 1 
 
    }; 
 

 
    
 
    $scope.format = 'dd-MMMM-yyyy'; 
 

 

 

 
//end of date picker 
 

 

 

 

 
    
 
});
.full button span { 
 
    background-color: limegreen; 
 
    border-radius: 32px; 
 
    color: black; 
 
    } 
 
    .partially button span { 
 
    background-color: orange; 
 
    border-radius: 32px; 
 
    color: black; 
 
    }
<html> 
 
<head> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    
 
</head> 
 

 
<div class="container"> 
 

 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 

 

 
    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre> 
 
    <p>above filter will just update above UI but I want to update actual ng-modle</p> 
 

 

 
    <h4>Popup</h4> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <p class="input-group"> 
 
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
 
      ng-model="dt" is-open="opened" min-date="minDate" max-date="'2018-06-22'" 
 
      ng-model-options="{timezone: 'UTC'}" 
 
      datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
 
      ng-required="true" close-text="Close" /> 
 
      <span class="input-group-btn"> 
 
       <button type="button" class="btn btn-default" ng-click="open($event)"> 
 
       <i class="glyphicon glyphicon-calendar"></i></button> 
 
       </span> 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
<table class="table table-striped table-bordered"> 
 
    <thead> 
 
     <tr> 
 
\t <th>Employee ID</th> 
 
\t <th>name</th> 
 
    </thead> 
 
    <tbody> 
 
    
 
    <tr ng-repeat="data in list"> 
 
     <td> {{ data.eid }} </td> 
 
     <td> {{ data.ename }} </td> 
 
    </tr> 
 
</tbody> 
 
    
 
</table> 
 

 
</div> 
 

 

 

 
</div>

答えて

1

あなたの他の依存関係が1.6.X.であるとして、1.6.1へのあなたの角度1.2.Xを更新更新の後、私はエラーを取得didntのTypeError: Cannot read property 'join' of undefined

var myApp = angular.module('myApp',['ui.bootstrap']); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.list = [ 
 
    {"eid":"10","ename":"nam1"}, 
 

 
    {"eid":"20","ename":"nam2"}, 
 

 
    {"eid":"30","ename":"nam3"}, 
 

 
    {"eid":"40","ename":"nam4"} 
 
    ]; 
 

 

 

 

 

 
    
 
//date picker 
 
    $scope.open = function($event) { 
 
    $event.preventDefault(); 
 
    $event.stopPropagation(); 
 

 
    $scope.opened = true; 
 
    }; 
 

 
    $scope.dateOptions = { 
 
    formatYear: 'yy', 
 
    startingDay: 1 
 
    }; 
 

 
    
 
    $scope.format = 'dd-MMMM-yyyy'; 
 

 

 

 
//end of date picker 
 

 

 

 

 
    
 
});
.full button span { 
 
    background-color: limegreen; 
 
    border-radius: 32px; 
 
    color: black; 
 
    } 
 
    .partially button span { 
 
    background-color: orange; 
 
    border-radius: 32px; 
 
    color: black; 
 
    }
<html> 
 
<head> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    
 
</head> 
 

 
<div class="container"> 
 

 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 

 

 
    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre> 
 
    <p>above filter will just update above UI but I want to update actual ng-modle</p> 
 

 

 
    <h4>Popup</h4> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <p class="input-group"> 
 
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
 
      ng-model="dt" is-open="opened" min-date="minDate" max-date="'2018-06-22'" 
 
      ng-model-options="{timezone: 'UTC'}" 
 
      datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
 
      ng-required="true" close-text="Close" /> 
 
      
 
      
 
      <span class="input-group-btn"> 
 
       <button type="button" class="btn btn-default" ng-click="open($event)"> 
 
       <i class="glyphicon glyphicon-calendar"></i></button> 
 
       </span> 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
<table class="table table-striped table-bordered"> 
 
    <thead> 
 
     <tr> 
 
\t <th>Employee ID</th> 
 
\t <th>name</th> 
 
    </thead> 
 
    <tbody> 
 
    
 
    <tr ng-repeat="data in list"> 
 
     <td> {{ data.eid }} </td> 
 
     <td> {{ data.ename }} </td> 
 
    </tr> 
 
</tbody> 
 
    
 
</table> 
 

 
</div> 
 

 

 

 
</div>

関連する問題