title: Creating a time range UI with angularjs and UI bootstrap
body: <p>I'm using a datepicker and two timepickers to create a time range within the given day (resulting in two date objects).</p>
  
  <p>The datepicker's ng-model points to the start date and copies the date portion to the end date on ng-change. So far so good.</p>
  
  <p>But: Modifying the end time reverts the end date to its original value!</p>
  
  <p>Markup:</p>
  
  <pre><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="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.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="TimepickerDemoCtrl"&gt;
    &lt;h1&gt;Purpose: UI for a time range within a day&lt;/h1&gt;
    &lt;p&gt;Issue: Updating the date sets the correct end date BUT updating the end time reverts the end date back to its original value.&lt;/p&gt;
    &lt;div class="input-group" style="width:150px"&gt;
        &lt;input type="text" required ng-model="item.startDate" ng-change="setEndDate()" class="form-control" datepicker-popup="yyyy-MM-dd" is-open="datePicker" /&gt;
        &lt;span class="input-group-btn"&gt;
            &lt;button type="button" class="btn btn-default" ng-click="openPicker($event, 'datePicker')"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;timepicker ng-model="item.startDate" show-meridian="false"&gt;&lt;/timepicker&gt;
    &lt;timepicker ng-model="item.endDate" show-meridian="false"&gt;&lt;/timepicker&gt;
  
    &lt;pre class="alert alert-info"&gt;start is: {{item.startDate | date:'yyyy-MM-dd HH:mm' }}&lt;br/&gt;end is:   {{item.endDate | date:'yyyy-MM-dd HH:mm' }}&lt;br/&gt;Duration: {{item.duration() | number:2}}&lt;/pre&gt;
  
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
    var starttime = new Date();
    starttime.setHours(8);
    starttime.setMinutes(0);
    var endtime = new Date();
    endtime.setHours(17);
    endtime.setMinutes(0);
  
    $scope.item = {
      startDate: starttime,
      endDate: endtime,
      duration: function () { return moment.duration(moment(this.endDate) - moment(this.startDate)).asHours() }
    }
  
    $scope.setEndDate = function() {
      $scope.item.endDate.setDate($scope.item.startDate.getDate());
      $scope.item.endDate.setMonth($scope.item.startDate.getMonth());
      $scope.item.endDate.setFullYear($scope.item.startDate.getFullYear());
    }
  
    $scope.openPicker = function ($event, pickerInstance) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope[pickerInstance] = true;
    };
  
  });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/zCFgf0mt4WOZeG9MPA9d" rel="nofollow">http://plnkr.co/edit/zCFgf0mt4WOZeG9MPA9d</a></p>