0
我已經從angular-bootstrap放在一起2日期選擇器。我使用了moment.js來計算兩個日期之間的差異。啓動應用程序時，日期之間的默認差值爲20個小時。這得到很好的計算。獲取2個日期之間的時間與momentjs和角度引導Datepicker
當我用Popup Datepicker更改結束日期時，出現TypeError: undefined is not a function錯誤。
的錯誤是在持續時間函數
return moment.duration(end.diff(start)).humanize();
其中diff(...開始結束。
這是代碼：
angular.module('ui.bootstrap.demo', ['ui.bootstrap','angularMoment']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope) {
$scope.maxDate = new moment().add(100, 'y');
// start date
$scope.startDateToday = function() {
$scope.startDate = new moment();
};
$scope.startDateToday();
$scope.startDateClear = function() {
$scope.startDate = null;
};
$scope.startDateOpen = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.startDateOpened = true;
};
// end date
$scope.endDateToday = function() {
$scope.endDate = new moment().add(20, 'h');
};
$scope.endDateToday();
$scope.endDateClear = function() {
$scope.endDate = null;
};
$scope.endDateOpen = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.endDateOpened = true;
};
// generic functions
$scope.toggleMin = function() {
$scope.minDate = new moment();
};
$scope.toggleMin();
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[2];
// duration
$scope.getDuration = function(start, end) {
return moment.duration(end.diff(start)).humanize();
};
});<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.8.3/angular-moment.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<h4>Start Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="startDate" is-open="startDateOpened" min-date="minDate" max-date="{{maxDate}}" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="startDateOpen($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<button type="button" class="btn btn-sm btn-info" ng-click="startDateToday()">Today</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="startDateClear()">Clear</button>
<h4>End Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="endDate" is-open="endDateOpened" min-date="minDate" max-date="{{maxDate}}" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="endDateOpen($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<button type="button" class="btn btn-sm btn-info" ng-click="endDateToday()">Today</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="endDateClear()">Clear</button>
<hr />
<div class="row">
<div class="col-md-6">
\t \t <pre>Start Date: <em>{{startDate | date:'fullDate' }}</em></pre>
\t \t </div>
</div>
<div class="row">
<div class="col-md-6">
\t \t <pre>End Date: <em>{{endDate | date:'fullDate' }}</em></pre>
\t \t </div>
</div>
<div class="row">
<div class="col-md-6">
\t \t <pre>Duration: <em>{{getDuration(startDate, endDate)}}</em></pre>
\t \t </div>
</div>
</div>
</body>
</html>如果日期選擇器沒有彈出，請嘗試Plnkr。沒有錯誤，但持續時間設置爲undefined。爲什麼getDuration函數的行爲如此？
啊......就這麼簡單！謝謝。 – mles