fix(IgxTimePicker): determine initial min-max value #6494

Author: jackofdiamond5

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

@@ -139,6 +139,14 @@ export class IgxTimePickerComponent implements
             };
             this.onValueChanged.emit(args);
         } else {
+            const minTime = this.minValue ? this._convertMinMaxValue(this.minValue) : null;
+            const maxTime = this.maxValue ? this._convertMinMaxValue(this.maxValue) : null;
+            if (maxTime && value > maxTime) {
+                this._value = maxTime;
+            } else if (minTime && value < minTime) {
+                this._value = minTime;
+            }
+
             const args: IgxTimePickerValidationFailedEventArgs = {
                 timePicker: this,
                 currentValue: value,
@@ -1259,7 +1267,7 @@ export class IgxTimePickerComponent implements
     }
 
     private _convertMinMaxValue(value: string): Date {
-        const date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
+        const date = this._dateFromModel ? new Date(this._dateFromModel) : this.value ? new Date(this.value) : new Date();
         const sections = value.split(/[\s:]+/);
         let hour, minutes, seconds, amPM;
 
@@ -1514,7 +1522,6 @@ export class IgxTimePickerComponent implements
         // use this flag to make sure that min/maxValue are checked (in _convertMinMaxValue() method)
         // against the real value when initializing the component and value is bound via ngModel
         this._dateFromModel = value;
-
         this.value = value;
 
         if (this.mode === InteractionMode.DropDown) {

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

@@ -16,7 +16,8 @@ <h4 class="sample-title">Time Picker with Dropdown</h4>
         <article class="timepicker-column">
             <h4 class="sample-title">Time Picker with Dropdown Hour Mode</h4>
             <div class="sample-description">{{showDate(date1)}}</div>
-            <div class="sample-description">Mask: {{hourModeTimePicker.mask}}, Format: {{hourModeTimePicker.format}}</div>
+            <div class="sample-description">Mask: {{hourModeTimePicker.mask}}, Format: {{hourModeTimePicker.format}}
+            </div>
             <div class="preview" style="width: 200px">
                 <igx-time-picker #hourModeTimePicker [mode]="'dropdown'" [(ngModel)]="date1" [format]="'h tt'">
                 </igx-time-picker>
@@ -64,15 +65,13 @@ <h4 class="sample-title">Templated Time Picker</h4>
             <p class="sample-description">Time picker with required input group</p>
             <div class="preview">
                 <igx-time-picker #templatedTimePicker [value]="today">
-                    <ng-template igxTimePickerTemplate
-                                 let-openDialog="openDialog"
-                                 let-value="value">
+                    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value">
                         <igx-input-group [supressInputAutofocus]="true">
                             <label igxLabel>Required</label>
                             <igx-prefix (click)="openDialog()">
                                 <igx-icon>access_time</igx-icon>
                             </igx-prefix>
-                            <input igxInput [value]="showDate(value)" [required]="isRequired"/>
+                            <input igxInput [value]="showDate(value)" [required]="isRequired" />
                             <igx-suffix igxRipple (click)="change()">
                                 <igx-icon fontSet="material">star</igx-icon>
                             </igx-suffix>
@@ -85,10 +84,13 @@ <h4 class="sample-title">Templated Time Picker</h4>
             <h4 class="sample-title">Templated Time Picker</h4>
             <p class="sample-description">Time picker with dropdown mode</p>
             <div class="preview">
-                <igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm" mode="dropdown">
-                    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
+                <igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm"
+                    mode="dropdown">
+                    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value"
+                        let-displayTime="displayTime">
                         <igx-input-group>
-                            <input #dropDownTarget igxInput [value]="displayTime" (blur)="onBlur(dropDownTarget.value, value)"/>
+                            <input #dropDownTarget igxInput [value]="displayTime"
+                                (blur)="onBlur(dropDownTarget.value, value)" />
                             <igx-suffix>
                                 <igx-icon (click)="openDialog(dropDownTarget)">access_time</igx-icon>
                             </igx-suffix>
@@ -101,10 +103,12 @@ <h4 class="sample-title">Templated Time Picker</h4>
             <h4 class="sample-title">Templated Time Picker</h4>
             <p class="sample-description">Time picker with dropdown mode + overlay settings + custom buttons</p>
             <div class="preview">
-                <igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm:ss" [mode]="'dropdown'">
-                    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayValue="displayValue">
+                <igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm:ss"
+                    [mode]="'dropdown'">
+                    <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value"
+                        let-displayValue="displayValue">
                         <igx-input-group>
-                            <input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)"/>
+                            <input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)" />
                             <igx-suffix>
                                 <igx-icon (click)="openDialog(target)">access_time</igx-icon>
                             </igx-suffix>

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, 17, 45, 0, 0);
+    date = new Date(2018, 10, 27, 21, 55, 0, 0);
     val = new Date(0, 0, 0, 19, 35, 30, 0);
     today = new Date(Date.now());
 
@@ -36,7 +36,7 @@ export class TimePickerSampleComponent implements AfterViewInit {
     public target: IgxInputDirective;
 
     ngAfterViewInit() {
-        this.myOverlaySettings.positionStrategy.settings.target = this.target.nativeElement;
+        // this.myOverlaySettings.positionStrategy.settings.target = this.target.nativeElement;
     }
 
     showDate(date) {