fix(IgxTimePicker): set displayValue to mask if no value is present #6494

Author: jackofdiamond5

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

@@ -198,11 +198,11 @@ describe('IgxTimePicker', () => {
         expect(timePicker.onValidationFailed.emit).toHaveBeenCalled();
     }));
 
-    it('Should not throw Validation Failed event with null value passed in', 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));
@@ -218,12 +218,12 @@ describe('IgxTimePicker', () => {
         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;
@@ -1976,12 +1976,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);
-    public customFormat = 'h:mm tt';
+    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

@@ -1112,7 +1112,7 @@ export class IgxTimePickerComponent implements
     }
 
     private _convertMinMaxValue(value: string): Date {
-        const date = this._dateFromModel ? new Date(this._dateFromModel) : this.value ? new Date(this.value) : new Date();
+        const date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
         const sections = value.split(/[\s:]+/);
         let hour, minutes, amPM;
 
@@ -1294,7 +1294,7 @@ export class IgxTimePickerComponent implements
         const oldValue = this.value;
         const newVal = this._convertMinMaxValue(this.displayValue);
 
-        if (!this.displayValue && this.displayValue === this._formatTime(this.value, this.format)) {
+        if (this.displayValue === this.parseMask(false)) {
             return;
         }
 
@@ -1566,8 +1566,8 @@ export class IgxTimePickerComponent implements
      * ```
      */
     public cancelButtonClick(): void {
-        if (this.mode === InteractionMode.DropDown && this.value) {
-            this.displayValue = this._formatTime(this.value, this.format);
+        if (this.mode === InteractionMode.DropDown) {
+            this.displayValue = this.value ? this._formatTime(this.value, this.format) : this.parseMask(false);
         }
 
         this.close();

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

@@ -6,8 +6,8 @@
         <article class="timepicker-column">
             <h4 class="sample-title">Time Picker with Dropdown</h4>
             <div class="sample-description">{{showDate(date)}}</div>
-            <div class="preview" style="width: 200px">
-                <igx-time-picker #tp (onValueChanged)="valueChanged($event)"
+            <div class="preview" style="width: 280px">
+                <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>