title: Get duration between 2 dates with momentjs and angular-bootstrap Datepicker
body: <p>I've put together 2 Datepickers from <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">angular-bootstrap</a>. I'm using moment.js to calculate the difference between the 2 Dates. The default difference is 20 hours between the Dates when you start the App. This gets calculated fine.</p>
  
  <p>When I'm changing the End Date with the Popup Datepicker I'm getting a <code>TypeError: undefined is not a function</code> error.</p>
  
  <p>The error is at the end in the duration function</p>
  
  <pre><code>return moment.duration(end.diff(start)).humanize();
  </code></pre>
  
  <p>where the <code>diff(...</code> starts.</p>
  
  <p>This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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();
    };
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.8.3/angular-moment.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="DatepickerDemoCtrl"&gt;
      &lt;h4&gt;Start Date&lt;/h4&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;p class="input-group"&gt;
                &lt;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" /&gt;
                &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" ng-click="startDateOpen($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn btn-sm btn-info" ng-click="startDateToday()"&gt;Today&lt;/button&gt;
      &lt;button type="button" class="btn btn-sm btn-danger" ng-click="startDateClear()"&gt;Clear&lt;/button&gt;
  
      &lt;h4&gt;End Date&lt;/h4&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;p class="input-group"&gt;
                &lt;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" /&gt;
                &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" ng-click="endDateOpen($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn btn-sm btn-info" ng-click="endDateToday()"&gt;Today&lt;/button&gt;
      &lt;button type="button" class="btn btn-sm btn-danger" ng-click="endDateClear()"&gt;Clear&lt;/button&gt;
  
      &lt;hr /&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
        &lt;pre&gt;Start Date: &lt;em&gt;{{startDate | date:'fullDate' }}&lt;/em&gt;&lt;/pre&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
        &lt;pre&gt;End Date: &lt;em&gt;{{endDate | date:'fullDate' }}&lt;/em&gt;&lt;/pre&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
        &lt;pre&gt;Duration: &lt;em&gt;{{getDuration(startDate, endDate)}}&lt;/em&gt;&lt;/pre&gt;
    &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If the Datepicker is not popping up, try the  <a href="http://plnkr.co/edit/YumMwLdprJsSiTN7YrF2?p=preview" rel="nofollow"><strong>Plnkr</strong></a>. There's no error, but the duration gets set to <code>undefined</code>. Why is the <code>getDuration</code> function behaving this way?</p>