feat(timepickerV2): absolute time / calendar picker works, #2761

public/app/features/dashboard/dashboardSrv.js

@@ -217,7 +217,7 @@ function (angular, $, kbn, _, moment) {
 
     p.formatDate = function(date, format) {
       if (!moment.isMoment(date)) {
-        date = moment(date)
+        date = moment(date);
       }
 
       format = format || 'YYYY-MM-DD HH:mm:ss';

public/app/features/dashboard/timepicker/dropdown.html

@@ -10,7 +10,7 @@
 		</div>
 
 		<div ng-if="openFromPicker">
-			<datepicker ng-model="absolute.to" class="gf-timepicker-component" show-weeks="false"></datepicker>
+			<datepicker ng-model="absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
 		</div>
 
 		<label class="small">To:</label>
@@ -21,6 +21,10 @@
 			</button>
 		</div>
 
+		<div ng-if="openToPicker">
+			<datepicker ng-model="absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
+		</div>
+
 		<label class="small">Refreshing every:</label>
 		<select ng-model="refresh.value" class='input-medium' ng-options="f.value as f.text for f in refresh.options">
 		</select>

public/app/features/dashboard/timepicker/input_date.js

 define([
   "angular",
+  "lodash",
   "moment",
-],function (angular, moment) {
+],function (angular, _, moment) {
   'use strict';
 
   angular.
@@ -11,22 +12,30 @@ define([
       restrict: 'A',
       require: 'ngModel',
       link: function ($scope, $elem, attrs, ngModel) {
-        // var format = 'YYYY-MM-DD HH:mm:ss.SSS';
-        // // $elem.after('<div class="input-datetime-format">' + format + '</div>');
-        //
-        // // What should I make with the input from the user?
-        // var fromUser = function (text) {
+        var format = 'YYYY-MM-DD HH:mm:ss';
+        // $elem.after('<div class="input-datetime-format">' + format + '</div>');
+
+        // What should I make with the input from the user?
+        var fromUser = function (text) {
+          console.log('fromUser: ' + text);
+          return text;
+          // if (_.isString(text)) {
+          // }
           // var parsed = moment(text, format);
           // return parsed.isValid() ? parsed : undefined;
-        // };
-        //
-        // // How should I present the data back to the user in the input field?
-        // var toUser = function (datetime) {
-        //   return moment(datetime).format(format);
-        // };
-        //
-        // ngModel.$parsers.push(fromUser);
-        // ngModel.$formatters.push(toUser);
+        };
+
+        // How should I present the data back to the user in the input field?
+        var toUser = function (currentValue) {
+          if (moment.isMoment(currentValue)) {
+            return currentValue.format(format);
+          } else {
+            return currentValue;
+          }
+        };
+
+        ngModel.$parsers.push(fromUser);
+        ngModel.$formatters.push(toUser);
       }
     };
   });

public/app/features/dashboard/timepicker/timepicker.ts

@@ -54,7 +54,7 @@ export class TimePickerCtrl {
         this.$scope.dashboard.formatDate(time.to, format);
     }
 
-    this.$scope.absoluteJs =  {form: time.from.toDate(), to: time.to.toDate()};
+    this.$scope.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
     this.$scope.timeRaw = timeRaw;
     this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
     this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
@@ -92,6 +92,14 @@ export class TimePickerCtrl {
     this.$scope.appEvent('hide-dash-editor');
   }
 
+  absoluteFromChanged() {
+    this.$scope.timeRaw.from = moment(this.$scope.absolute.fromJs);
+  }
+
+  absoluteToChanged() {
+    this.$scope.timeRaw.to = moment(this.$scope.absolute.toJs);
+  }
+
   setRelativeFilter(timespan) {
     this.$scope.panel.now = true;
 

public/less/timepicker.less

@@ -44,13 +44,18 @@
 }
 
 .gf-timepicker-component {
+  margin-bottom: 10px;
   button.btn-sm {
     .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
     background-image: none;
     border: none;
     padding: 6px 9px;
     color: @textColor;
-    &.active .text-info {
+    &.active span {
+      color: @blue;
+      font-weight: bold;
+    }
+    .text-info {
       color: @orange;
       font-weight: bold;
     }

public/test/test-main.js

@@ -19,7 +19,7 @@ require.config({
     'angular-sanitize':       'vendor/angular-sanitize/angular-sanitize',
     angularMocks:             'vendor/angular-mocks/angular-mocks',
     'angular-dragdrop':       'vendor/angular-native-dragdrop/draganddrop',
-    'angular-ui':             'vendor/angular-ui/tabs',
+    'angular-ui':             'vendor/angular-ui/ui-bootstrap-tpls',
     'angular-strap':          'vendor/angular-other/angular-strap',
     timepicker:               'vendor/angular-other/timepicker',
     datepicker:               'vendor/angular-other/datepicker',