fix(time-picker): Addressing the change requests. #3978

Author: valadzhov

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -578,10 +578,6 @@ export class IgxTimePickerComponent implements
      */
     public selectedAmPm: string;
 
-    public minValueConverted: Date;
-
-    public maxValueConverted: Date;
-
     /** @hidden @internal */
     private _value: Date;
     private _resourceStrings = CurrentResourceStrings.TimePickerResStrings;
@@ -1271,8 +1267,9 @@ export class IgxTimePickerComponent implements
         return date;
     }
 
+    /** @hidden @internal */
     public convertMinMaxValue(value: string): Date {
-        if (value == null) {
+        if (!value) {
             return;
         } else {
         const date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();

projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts

@@ -14,6 +14,7 @@ import {
 } from '@angular/core';
 import { IGX_TIME_PICKER_COMPONENT, IgxTimePickerBase } from './time-picker.common';
 import { InteractionMode } from '../core/enums';
+import { DatePickerUtil } from '../date-picker/date-picker.utils';
 
 /** @hidden */
 @Directive({
@@ -268,7 +269,7 @@ export class IgxHourItemDirective {
 
     @HostBinding('class.igx-time-picker__item--disabled')
     get applyDisabledStyleForHours(): boolean {
-        if (this.minValueDate === undefined || this.maxValueDate === undefined) {
+        if (!this.minValueDate || !this.maxValueDate) {
             return false;
         }
         let hour = parseInt(this.value, 10);
@@ -277,7 +278,7 @@ export class IgxHourItemDirective {
         }
         const date = new Date(this.minValueDate);
         date.setHours(hour);
-        return !(date <= this.maxValueDate && date >= this.minValueDate);
+        return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
     }
 
     get isSelectedHour(): boolean {
@@ -336,7 +337,7 @@ export class IgxMinuteItemDirective {
 
     @HostBinding('class.igx-time-picker__item--disabled')
     get applyDisabledStyleForMinutes(): boolean {
-        if (this.minValueDate === undefined || this.maxValueDate === undefined) {
+        if (!this.minValueDate || !this.maxValueDate) {
             return false;
         }
         const minute = parseInt(this.value, 10);
@@ -347,7 +348,7 @@ export class IgxMinuteItemDirective {
         const date = new Date(this.minValueDate);
         date.setHours(hour);
         date.setMinutes(minute);
-        return !(date <= this.maxValueDate && date >= this.minValueDate);
+        return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
     }
 
     get isSelectedMinute(): boolean {
@@ -409,7 +410,7 @@ export class IgxSecondsItemDirective {
 
     @HostBinding('class.igx-time-picker__item--disabled')
     get applyDisabledStyleForSeconds(): boolean {
-        if (this.minValueDate === undefined || this.maxValueDate === undefined) {
+        if (!this.minValueDate || !this.maxValueDate) {
             return false;
         }
         const minute = parseInt(this.selectedMinute, 10);
@@ -422,7 +423,7 @@ export class IgxSecondsItemDirective {
         date.setHours(hour);
         date.setMinutes(minute);
         date.setSeconds(second);
-        return !(date <= this.maxValueDate && date >= this.minValueDate);
+        return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
     }
 
     get isSelectedSeconds(): boolean {
@@ -484,7 +485,7 @@ export class IgxAmPmItemDirective {
 
     @HostBinding('class.igx-time-picker__item--disabled')
     get applyDisabledStyleForAmPm(): boolean {
-        if (this.minValueDate === undefined || this.maxValueDate === undefined) {
+        if (!this.minValueDate || !this.maxValueDate) {
             return false;
         }
         const minute = parseInt(this.selectedMinute, 10);
@@ -498,7 +499,7 @@ export class IgxAmPmItemDirective {
         date.setHours(hour);
         date.setMinutes(minute);
         date.setSeconds(second);
-        return !(date <= this.maxValueDate && date >= this.minValueDate);
+        return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
     }
 
     get isSelectedAmPm(): boolean {

src/app/time-picker/time-picker.sample.ts

@@ -17,7 +17,7 @@ export class TimePickerSampleComponent implements AfterViewInit {
     mode = InteractionMode.DropDown;
 
     date1 = new Date(2018, 10, 27, 17, 45, 0, 0);
-    date = new Date(2018, 10, 27, 21, 45, 0, 0);
+    date = new Date(2018, 10, 27, 9, 45, 0, 0);
     val = new Date(0, 0, 0, 19, 35, 30, 0);
     today = new Date(Date.now());