Merge pull request #6554 from IgniteUI/bpenkov/fix-6494-master

Determine initial min-max value

Author: Lipata

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

@@ -183,10 +183,32 @@ describe('IgxTimePicker', () => {
         expect(timePicker.onValidationFailed.emit).toHaveBeenCalled();
     }));
 
-    it('TimePicker cancel button', fakeAsync(() => {
+    it('Should display mask on cancel button click with bound null value', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
+        fixture.componentInstance.dateValue = null;
+        fixture.componentInstance.mode = 'dropdown';
+        fixture.detectChanges();
+        const timePicker = fixture.componentInstance.timePicker;
+        const dom = fixture.debugElement;
+        const timePickerTarget = dom.query(By.directive(IgxInputDirective));
+        spyOn(timePicker.onValidationFailed, 'emit');
+
+        UIInteractions.clickElement(timePickerTarget);
+        tick();
+        fixture.detectChanges();
+
+        const cancelButton = dom.query(By.css('.igx-button--flat'));
+        UIInteractions.clickElement(cancelButton);
+        tick();
         fixture.detectChanges();
 
+        expect(timePicker.onValidationFailed.emit).not.toHaveBeenCalled();
+        expect(timePicker.displayValue).toEqual('--:--:-- --');
+    }));
+
+    it('TimePicker cancel button', fakeAsync(() => {
+        const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
+        fixture.detectChanges();
         const timePicker = fixture.componentInstance.timePicker;
         const dom = fixture.debugElement;
         const initialTime = dom.query(By.directive(IgxInputDirective)).nativeElement.value;
@@ -1613,34 +1635,34 @@ describe('IgxTimePicker', () => {
         }));
 
         it('When timepicker is closed via outside click, the focus should NOT remain on the input',
-        fakeAsync(() => {
-            fixture.detectChanges();
-            input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
-            let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            fakeAsync(() => {
+                fixture.detectChanges();
+                input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+                let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
 
-            expect(overlayToggle.length).toEqual(0);
+                expect(overlayToggle.length).toEqual(0);
 
-            const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
-            UIInteractions.clickElement(iconTime);
-            tick();
-            fixture.detectChanges();
+                const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
+                UIInteractions.clickElement(iconTime);
+                tick();
+                fixture.detectChanges();
 
-            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-            expect(overlayToggle[0]).not.toBeNull();
-            expect(overlayToggle[0]).not.toBeUndefined();
+                overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+                expect(overlayToggle[0]).not.toBeNull();
+                expect(overlayToggle[0]).not.toBeUndefined();
 
-            const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
-            dummyInput.focus();
-            dummyInput.click();
-            tick();
-            fixture.detectChanges();
+                const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
+                dummyInput.focus();
+                dummyInput.click();
+                tick();
+                fixture.detectChanges();
 
-            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-            input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
-            expect(overlayToggle[0]).toEqual(undefined);
-            expect(input).not.toEqual(document.activeElement);
-            expect(dummyInput).toEqual(document.activeElement);
-        }));
+                overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+                input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+                expect(overlayToggle[0]).toEqual(undefined);
+                expect(input).not.toEqual(document.activeElement);
+                expect(dummyInput).toEqual(document.activeElement);
+            }));
     });
 
     describe('Timepicker with outlet', () => {
@@ -2024,12 +2046,13 @@ export class IgxTimePickerWithPassedTimeComponent {
 
 @Component({
     template: `
-        <igx-time-picker [value]="dateValue" [format]="customFormat"></igx-time-picker>
+        <igx-time-picker [mode]="mode" [value]="dateValue" [format]="customFormat"></igx-time-picker>
     `
 })
 export class IgxTimePickerWithPmTimeComponent {
     public dateValue: Date = new Date(2017, 7, 7, 12, 27, 23);
     public customFormat = 'h:mm:ss tt';
+    public mode = 'dialog';
     @ViewChild(IgxTimePickerComponent, { static: true }) public timePicker: IgxTimePickerComponent;
 }
 

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

@@ -1305,9 +1305,9 @@ export class IgxTimePickerComponent implements
             return false;
         } else if (this.minValue && value < this._convertMinMaxValue(this.minValue)) {
             return false;
-        } else {
-            return true;
         }
+
+        return true;
     }
 
     private _isEntryValid(val: string): boolean {
@@ -1477,6 +1477,10 @@ export class IgxTimePickerComponent implements
         const oldValue = this.value;
         const newVal = this._convertMinMaxValue(this.displayValue);
 
+        if (this.displayValue === this.parseMask(false)) {
+            return;
+        }
+
         if (this._isValueValid(newVal)) {
             if (!this.value || oldValue.getTime() !== newVal.getTime()) {
                 this.value = newVal;
@@ -1514,7 +1518,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) {
@@ -1793,7 +1796,7 @@ export class IgxTimePickerComponent implements
      */
     public cancelButtonClick(): void {
         if (this.mode === InteractionMode.DropDown) {
-            this.displayValue = this._formatTime(this.value, this.format);
+            this.displayValue = this.value ? this._formatTime(this.value, this.format) : this.parseMask(false);
         }
 
         this.close();
@@ -2036,8 +2039,8 @@ export class IgxTimePickerComponent implements
         }
 
         // minor hack for preventing cursor jumping in IE
-        this._displayValue = this.inputFormat.transform(displayVal);
-        this.input.nativeElement.value = this._displayValue;
+        this.displayValue = this.inputFormat.transform(displayVal);
+        this.input.nativeElement.value = this.displayValue;
         this._setCursorPosition(cursor);
 
         requestAnimationFrame(() => {

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

@@ -7,7 +7,7 @@
             <h4 class="sample-title">Time Picker with Dropdown</h4>
             <div class="sample-description">{{showDate(date)}}</div>
             <div class="preview" style="width: 280px">
-                <igx-time-picker #tp (onValueChanged)="valueChanged($event)"
+                <igx-time-picker #tp (onValueChanged)="valueChanged($event)" [minValue]="'9:15 AM'" [maxValue]="'9:15 PM'"
                     (onValidationFailed)="validationFailed($event)" [mode]="mode" [isSpinLoop]="isSpinLoop"
                     [(ngModel)]="date" [itemsDelta]="itemsDelta" [format]="format">
                 </igx-time-picker>

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());