fix(timepicker): cannot use timepicker controls when min date changes #5697

demo/src/app/components/+timepicker/demos/min-max/min-max.html

@@ -1,3 +1,5 @@
 <timepicker [(ngModel)]="myTime" [min]="minTime" [max]="maxTime"></timepicker>
 
 <pre class="alert alert-info">Time is: {{myTime}}</pre>
+
+<button (click)="setMinTime()"> Set Min Time to 8 AM</button>

demo/src/app/components/+timepicker/demos/min-max/min-max.ts

@@ -6,13 +6,20 @@ import { Component } from '@angular/core';
 })
 export class DemoTimepickerMinMaxComponent {
   myTime: Date = new Date();
-  minTime: Date = new Date();
+  targetMinTime: Date = new Date();
   maxTime: Date = new Date();
+  minTime: Date;
 
   constructor() {
-    this.minTime.setHours(8);
-    this.minTime.setMinutes(0);
-    this.maxTime.setHours(23);
-    this.maxTime.setMinutes(55);
+    this.targetMinTime.setHours(8);
+    this.targetMinTime.setMinutes(0);
+    this.myTime.setHours(5);
+    this.myTime.setMinutes(15);
+    this.maxTime.setHours(17);
+    this.maxTime.setMinutes(0);
+  }
+
+  setMinTime() {
+    this.minTime = this.targetMinTime;
   }
 }

src/spec/timepicker/timepicker-controls.util.spec.ts

@@ -46,7 +46,10 @@ describe('Util: Timepicker-controls', () => {
       canDecrementHours: true,
       canDecrementMinutes: true,
       canDecrementSeconds: true,
-      canToggleMeridian: true
+      canToggleMeridian: true,
+      invalidHours: false,
+      invalidMinutes: false,
+      invalidSeconds: false
     };
 
     event = {

src/timepicker/reducer/timepicker.reducer.ts

@@ -32,7 +32,11 @@ export const initialState: TimepickerState = {
     canDecrementMinutes: true,
     canDecrementSeconds: true,
 
-    canToggleMeridian: true
+    canToggleMeridian: true,
+
+    invalidHours: false,
+    invalidMinutes: false,
+    invalidSeconds: false
   }
 };
 
@@ -54,7 +58,7 @@ export function timepickerReducer(state = initialState, action: Action) {
       const _newTime = changeTime(state.value, { hour: action.payload.step });
 
       if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
-          return state;
+          state.controls.invalidHours = true;
       }
 
       return Object.assign({}, state, { value: _newTime });
@@ -71,7 +75,7 @@ export function timepickerReducer(state = initialState, action: Action) {
       const _newTime = changeTime(state.value, { minute: action.payload.step });
 
       if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
-        return state;
+        state.controls.invalidMinutes = true;
       }
 
       return Object.assign({}, state, { value: _newTime });
@@ -90,7 +94,7 @@ export function timepickerReducer(state = initialState, action: Action) {
       });
 
       if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
-        return state;
+        state.controls.invalidSeconds = true;
       }
 
       return Object.assign({}, state, { value: _newTime });

src/timepicker/timepicker-controls.util.ts

@@ -38,11 +38,9 @@ export function canChangeHours(
     return false;
   }
 
-  if (event.step < 0 && !controls.canDecrementHours) {
-    return false;
-  }
+  return !(event.step < 0 && !controls.canDecrementHours);
+
 
-  return true;
 }
 
 export function canChangeMinutes(
@@ -55,11 +53,8 @@ export function canChangeMinutes(
   if (event.step > 0 && !controls.canIncrementMinutes) {
     return false;
   }
-  if (event.step < 0 && !controls.canDecrementMinutes) {
-    return false;
-  }
 
-  return true;
+  return !(event.step < 0 && !controls.canDecrementMinutes);
 }
 
 export function canChangeSeconds(
@@ -72,11 +67,8 @@ export function canChangeSeconds(
   if (event.step > 0 && !controls.canIncrementSeconds) {
     return false;
   }
-  if (event.step < 0 && !controls.canDecrementSeconds) {
-    return false;
-  }
 
-  return true;
+  return !(event.step < 0 && !controls.canDecrementSeconds);
 }
 
 export function getControlsValue(
@@ -131,7 +123,11 @@ export function timepickerControls(
     canDecrementMinutes: true,
     canDecrementSeconds: true,
 
-    canToggleMeridian: true
+    canToggleMeridian: true,
+
+    invalidHours: false,
+    invalidMinutes: false,
+    invalidSeconds: false
   };
 
   if (!value) {
@@ -142,17 +138,21 @@ export function timepickerControls(
   if (max) {
     const _newHour = changeTime(value, { hour: hourStep });
     res.canIncrementHours = max > _newHour && (value.getHours() + hourStep) < hoursPerDay;
+    res.invalidHours = max < _newHour;
 
     if (!res.canIncrementHours) {
       const _newMinutes = changeTime(value, { minute: minuteStep });
       res.canIncrementMinutes = showSeconds
         ? max > _newMinutes
         : max >= _newMinutes;
+
+      res.invalidMinutes = max < _newMinutes;
     }
 
     if (!res.canIncrementMinutes) {
       const _newSeconds = changeTime(value, { seconds: secondsStep });
       res.canIncrementSeconds = max >= _newSeconds;
+      res.invalidSeconds = max < _newSeconds;
     }
 
     if (value.getHours() < hoursPerDayHalf) {
@@ -163,17 +163,21 @@ export function timepickerControls(
   if (min) {
     const _newHour = changeTime(value, { hour: -hourStep });
     res.canDecrementHours = min < _newHour;
+    res.invalidHours = min > _newHour;
 
     if (!res.canDecrementHours) {
       const _newMinutes = changeTime(value, { minute: -minuteStep });
       res.canDecrementMinutes = showSeconds
         ? min < _newMinutes
         : min <= _newMinutes;
+
+      res.invalidMinutes = min > _newMinutes;
     }
 
     if (!res.canDecrementMinutes) {
       const _newSeconds = changeTime(value, { seconds: -secondsStep });
       res.canDecrementSeconds = min <= _newSeconds;
+      res.invalidSeconds = min > _newSeconds;
     }
 
     if (value.getHours() >= hoursPerDayHalf) {

src/timepicker/timepicker.models.ts

@@ -15,6 +15,10 @@ export interface TimepickerControls {
   canDecrementSeconds: boolean;
 
   canToggleMeridian: boolean;
+
+  invalidHours: boolean;
+  invalidMinutes: boolean;
+  invalidSeconds: boolean;
 }
 
 export interface TimepickerComponentState {