使用 momentjs 和 angular-bootstrap Datepicker 获取 2 个日期之间的持续时间

Question

我已经将来自 angular-bootstrap 的 2 个日期选择器放在一起。我正在使用 moment.js 来计算两个日期之间的差异。启动应用程序的日期之间的默认差异为 20 小时。这计算得很好。

当我使用弹出式日期选择器更改结束日期时，出现 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">
      <pre>Start Date: <em>{{startDate | date:'fullDate' }}</em></pre>
  </div>
    </div>
    <div class="row">
        <div class="col-md-6">
      <pre>End Date: <em>{{endDate | date:'fullDate' }}</em></pre>
  </div>
    </div>
    <div class="row">
        <div class="col-md-6">
      <pre>Duration: <em>{{getDuration(startDate, endDate)}}</em></pre>
  </div>
    </div>

</div>
</body>
</html>

如果日期选择器没有弹出，请尝试 Plnkr。没有错误，但持续时间设置为 undefined。为什么 getDuration 函数会这样？

Answer 1

将 getDuration 更改为：

  $scope.getDuration = function(start, end) {
    try {
      return ((moment.duration(end - start)).humanize());
    } catch (e) {
      return "Cant evaluate"
    }
  };

请在此处查看演示 http://plnkr.co/edit/G5eMB65rrcU3sN7rAR7N?p=preview

使用 momentjs 和 angular-bootstrap Datepicker 获取 2 个日期之间的持续时间

Get duration between 2 dates with momentjs and angular-bootstrap Datepicker

angularjs

datepicker

momentjs

angular-bootstrap