When a date is selected in absolute mode, set to start/end of day (#1…

…0433)

* In absolute timepicker, use whole days

* Use ngModelOptions instead of implicit bindings

* fix absolute timepicker test

* Fix wording in test

src/ui/public/directives/__tests__/timepicker.js

@@ -345,8 +345,8 @@ describe('timepicker directive', function () {
       inputs = {
         fromInput: $elem.find('.kbn-timepicker-section input[ng-model="absolute.from"]'),
         toInput: $elem.find('.kbn-timepicker-section input[ng-model="absolute.to"]'),
-        fromCalendar: $elem.find('.kbn-timepicker-section div[ng-model="absolute.from"] '),
-        toCalendar: $elem.find('.kbn-timepicker-section div[ng-model="absolute.to"] '),
+        fromCalendar: $elem.find('.kbn-timepicker-section div[ng-model="pickFromDate"] '),
+        toCalendar: $elem.find('.kbn-timepicker-section div[ng-model="pickToDate"] '),
       };
 
     });
@@ -421,6 +421,33 @@ describe('timepicker directive', function () {
       done();
     });
 
-  });
+    it('should set from/to to start/end of day if set from datepicker', function (done) {
+      $scope.pickFromDate(new Date('2012-02-01 12:00'));
+      $scope.pickToDate(new Date('2012-02-11 12:00'));
+      $scope.applyAbsolute();
+
+      expect($parentScope.updateFilter.firstCall.args[0].valueOf()).to.be(moment('2012-02-01 00:00:00.000').valueOf());
+      expect($parentScope.updateFilter.firstCall.args[1].valueOf()).to.be(moment('2012-02-11 23:59:59.999').valueOf());
+
+      done();
+    });
+
+    it('should allow setting hour/minute/second after setting from datepicker', function (done) {
+      $scope.pickFromDate(new Date('2012-02-01 12:00'));
+      $scope.pickToDate(new Date('2012-02-11 12:00'));
+      $scope.applyAbsolute();
 
+      expect($parentScope.updateFilter.firstCall.args[0].valueOf()).to.be(moment('2012-02-01 00:00:00.000').valueOf());
+      expect($parentScope.updateFilter.firstCall.args[1].valueOf()).to.be(moment('2012-02-11 23:59:59.999').valueOf());
+
+      $scope.absolute.from = moment('2012-02-01 01:23:45');
+      $scope.absolute.to = moment('2012-02-11 12:34:56');
+      $scope.applyAbsolute();
+
+      expect($parentScope.updateFilter.secondCall.args[0].valueOf()).to.be(moment('2012-02-01 01:23:45').valueOf());
+      expect($parentScope.updateFilter.secondCall.args[1].valueOf()).to.be(moment('2012-02-11 12:34:56').valueOf());
+
+      done();
+    });
+  });
 });

src/ui/public/timepicker/timepicker.html

@@ -106,7 +106,7 @@
                     <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
                   </div>
                   <div>
-                    <datepicker ng-model="absolute.from" max-date="absolute.to" show-weeks="false"></datepicker>
+                    <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
                   </div>
                 </div>
 
@@ -119,7 +119,7 @@
                     <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
                   </div>
                   <div>
-                    <datepicker ng-model="absolute.to" min-date="absolute.from" show-weeks="false"></datepicker>
+                    <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
                   </div>
                 </div>
 

src/ui/public/timepicker/timepicker.js

@@ -75,13 +75,17 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
         }
       });
 
-      $scope.$watch('absolute.from', function (date) {
-        if (_.isDate(date)) $scope.absolute.from = moment(date);
-      });
+      $scope.pickFromDate = function (date) {
+        if (!date) return $scope.absolute.from;
+        date.setHours(0, 0, 0, 0); // Start of day
+        return $scope.absolute.from = moment(date);
+      };
 
-      $scope.$watch('absolute.to', function (date) {
-        if (_.isDate(date)) $scope.absolute.to = moment(date);
-      });
+      $scope.pickToDate = function (date) {
+        if (!date) return $scope.absolute.to;
+        date.setHours(23, 59, 59, 999); // End of day
+        return $scope.absolute.to = moment(date);
+      };
 
       $scope.setMode = function (thisMode) {
         switch (thisMode) {