Merge pull request elastic#8389 from elastic/jasper/backport/8383/5.x

[backport] PR elastic#8383 to 5.x - Update absolute time picker when time selection changes.

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

@@ -398,7 +398,6 @@ describe('timepicker directive', function () {
       done();
     });
 
-
     it('should parse the time of scope.from and scope.to to set its own variables', function (done) {
       $scope.setQuick('now-30m', 'now');
       $scope.setMode('absolute');
@@ -409,6 +408,22 @@ describe('timepicker directive', function () {
       done();
     });
 
+    it('should update its own variables if timefilter time is updated', function (done) {
+      $scope.setMode('absolute');
+      $scope.$digest();
+
+      const startDate = moment('1980-01-01T00:11:02.001Z');
+      const endDate = moment('1983-10-11T0=40:03:32.051Z');
+
+      $parentScope.timefilter.time.from = startDate;
+      $parentScope.timefilter.time.to = endDate;
+      $parentScope.$digest();
+
+      expect($scope.absolute.from.valueOf()).to.be(startDate.valueOf());
+      expect($scope.absolute.to.valueOf()).to.be(endDate.valueOf());
+      done();
+    });
+
     it('should disable the "Go" button if from > to', function (done) {
       $scope.absolute.from = moment('2012-02-01');
       $scope.absolute.to = moment('2012-02-11');

src/ui/public/timepicker/timepicker.js

@@ -60,6 +60,18 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
         {text: 'Years ago', value: 'y'},
       ];
 
+      $scope.$watch('from', function (date) {
+        if (moment.isMoment(date) && $scope.mode === 'absolute') {
+          $scope.absolute.from = date;
+        }
+      });
+
+      $scope.$watch('to', function (date) {
+        if (moment.isMoment(date) && $scope.mode === 'absolute') {
+          $scope.absolute.to = date;
+        }
+      });
+
       $scope.$watch('absolute.from', function (date) {
         if (_.isDate(date)) $scope.absolute.from = moment(date);
       });