feat(timepicker): added validation to timepicker, and validation state to apply button, fixes #3870

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

@@ -1,47 +0,0 @@
-<div class="gf-box-header">
-	<div class="gf-box-title">
-		<i class="fa fa-clock-o"></i>
-		Custom time range
-	</div>
-	<button class="gf-box-header-close-btn" ng-click="dismiss();">
-		<i class="fa fa-remove"></i>
-	</button>
-</div>
-
-<div class="gf-box-body">
-	<div class="timepicker form-horizontal">
-		<form name="timeForm" style="margin-bottom: 0">
-
-			<div class="timepicker-from-column">
-				<label class="small">From</label>
-				<div class="fake-input timepicker-input">
-					<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
-					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
-					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
-					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
-					<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond"  onClick="this.select();"/>
-				</div>
-			</div>
-
-			<div class="timepicker-to-column">
-
-				<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="ctrl.setNow();temptime.now=true">set now</a>)</label>
-
-				<div class="fake-input timepicker-input">
-					<div ng-hide="temptime.now">
-						<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
-						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
-						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
-						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
-						<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
-					</div>
-					<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">&nbsp <i class="pointer fa fa-remove" ng-click="ctrl.setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
-				</div>
-			</div>
-
-			<br>
-			<button ng-click="ctrl.setAbsoluteTimeFilter(ctrl.validate(temptime));dismiss();" ng-disabled="!timeForm.$valid" class="btn btn-success">Apply</button>
-			<span class="" ng-hide="input.$valid">Invalid date or range</span>
-		</form>
-	</div>
-</div>

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

@@ -1,5 +1,5 @@
 <div class="row pull-right">
-	<div class="gf-timepicker-absolute-section">
+	<form name="timeForm" class="gf-timepicker-absolute-section">
 		<h3>Time range</h3>
 		<label class="small">From:</label>
 		<div class="input-prepend">
@@ -29,10 +29,10 @@
 		<select ng-model="ctrl.refresh.value" class='input-medium' ng-options="f.value as f.text for f in ctrl.refresh.options">
 		</select>
 
-		<button class="btn btn-inverse gf-timepicker-btn-apply" type="button" ng-click="ctrl.applyCustom()">
+		<button type="submit" class="btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">
 			Apply
 		</button>
-	</div>
+	</form>
 
 	<div class="gf-timepicker-relative-section">
 		<h3>Quick ranges</h3>

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

@@ -1,6 +1,7 @@
 ///<reference path="../../../headers/common.d.ts" />
 
 import moment from 'moment';
+import * as dateMath from 'app/core/utils/datemath';
 
 export function inputDateDirective() {
   return {
@@ -11,8 +12,14 @@ export function inputDateDirective() {
 
       var fromUser = function (text) {
         if (text.indexOf('now') !== -1) {
+          if (!dateMath.isValid(text)) {
+            ngModel.$setValidity("error", false);
+            return undefined;
+          }
+          ngModel.$setValidity("error", true);
           return text;
         }
+
         var parsed;
         if ($scope.ctrl.isUtc) {
           parsed = moment.utc(text, format);
@@ -20,7 +27,13 @@ export function inputDateDirective() {
           parsed = moment(text, format);
         }
 
-        return parsed.isValid() ? parsed : undefined;
+        if (!parsed.isValid()) {
+          ngModel.$setValidity("error", false);
+          return undefined;
+        }
+
+        ngModel.$setValidity("error", true);
+        return parsed;
       };
 
       var toUser = function (currentValue) {