Merge pull request #2471 from IgniteUI/sstoyanov/bug-fix-2470

Always use date from value

Author: kdinev

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

@@ -860,15 +860,59 @@ describe('IgxTimePicker', () => {
         tick();
     }));
 
-    it('TimePicker with retemplated input group (icon removed)', (async() => {
+    it('TimePicker with retemplated input group (icon removed)', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxTimePickerRetemplatedComponent);
-        wait();
+        tick();
         fixture.detectChanges();
 
         const dom = fixture.debugElement;
         expect(dom.query(By.css('.igx-input-group'))).not.toBeNull();
         expect(dom.query(By.css('.igx-icon'))).toBeNull();
     }));
+
+    // https://github.com/IgniteUI/igniteui-angular/issues/2470
+    it('TimePicker always use date from value', fakeAsync(() => {
+        const fixture = TestBed.createComponent(IgxTimePickerWithPassedTimeComponent);
+        tick();
+        fixture.detectChanges();
+        const dom = fixture.debugElement;
+
+        const initialValue = (fixture.componentInstance.timePicker.value);
+        const initialDate = getDateStringFromDateObject(initialValue);
+        const initialTime = initialValue.getHours() + ':' + initialValue.getMinutes();
+
+        const timePickerTarget = dom.query(By.directive(IgxInputDirective));
+        UIInteractions.clickElement(timePickerTarget);
+        tick(100);
+        fixture.detectChanges();
+
+        const hourColumn = dom.query(By.css('.igx-time-picker__hourList'));
+        const selectHour = hourColumn.children[5];
+
+        const minutesColumn = dom.query(By.css('.igx-time-picker__minuteList'));
+        const selectMinutes = minutesColumn.children[2];
+
+        UIInteractions.clickElement(selectHour);
+        fixture.detectChanges();
+        tick(100);
+        UIInteractions.clickElement(selectMinutes);
+        fixture.detectChanges();
+        tick(100);
+
+        const OkButton = dom.queryAll(By.css('.igx-button--flat'))[1];
+        UIInteractions.clickElement(OkButton);
+        fixture.detectChanges();
+        tick(100);
+
+        const changedValue = (fixture.componentInstance.timePicker.value);
+        const changedDate = getDateStringFromDateObject(changedValue);
+        const changedTime = changedValue.getHours() + ':' + changedValue.getMinutes();
+
+        expect(initialDate).toEqual(changedDate);
+        expect(initialTime).not.toEqual(changedTime);
+        expect(changedTime).toEqual('5:23');
+
+    }));
 });
 
 @Component({
@@ -986,3 +1030,11 @@ function findByInnerText(collection, searchText) {
         }
     }
 }
+
+function getDateStringFromDateObject(date: Date): string {
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    return year + '/' + month + '/' + day;
+}

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

@@ -757,7 +757,7 @@ export class IgxTimePickerComponent implements ControlValueAccessor, OnInit, OnD
     }
 
     private _getSelectedTime(): Date {
-        const date = new Date();
+        const date = this.value ? new Date(this.value) : new Date();
         date.setHours(parseInt(this.selectedHour, 10));
         date.setMinutes(parseInt(this.selectedMinute, 10));
         date.setSeconds(0);
@@ -771,7 +771,7 @@ export class IgxTimePickerComponent implements ControlValueAccessor, OnInit, OnD
     }
 
     private _convertMinMaxValue(value: string): Date {
-        const date = new Date();
+        const date = this.value ? new Date(this.value) : new Date();
         const sections = value.split(/[\s:]+/);
 
         date.setHours(parseInt(sections[0], 10));