Merge branch 'master' into vslavov/input-group-disabled

Author: Lipata

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

@@ -1186,6 +1186,29 @@ describe('IgxTimePicker', () => {
                 expect(selectedAMPM).toEqual(ampm);
             }));
 
+            it('should display correctly non-zero padded time format', fakeAsync(() => {
+                fixture.componentInstance.date = new Date(2021, 24, 2, 8, 5, 5);
+                fixture.componentInstance.timePicker.mode = PickerInteractionMode.DropDown;
+                timePicker.inputFormat = 'h:m:s';
+                fixture.detectChanges();
+
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                const selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM));
+                const selectedHour = selectedItems[0].nativeElement.innerText;
+                const selectedMinutes = selectedItems[1].nativeElement.innerText;
+                const selectedAMPM = selectedItems[2].nativeElement.innerText;
+
+                const hours = fixture.componentInstance.date.getHours();
+                const minutes = fixture.componentInstance.date.getMinutes();
+                const seconds = fixture.componentInstance.date.getSeconds();
+
+                expect(selectedHour).toEqual(hours.toString());
+                expect(selectedMinutes).toEqual(minutes.toString());
+                expect(selectedAMPM).toEqual(seconds.toString());
+            }));
 
             it('should display selected time in dialog header', fakeAsync(() => {
                 fixture.componentInstance.timePicker.mode = PickerInteractionMode.Dialog;

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

@@ -264,18 +264,19 @@ export class IgxTimeItemDirective {
     }
 
     public get isSelectedTime(): boolean {
+        const currentValue = this.value.length < 2 ? `0${this.value}` : this.value;
         const dateType = this.itemList.type;
         const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.inputFormat);
         switch (dateType) {
             case 'hourList':
                 const hourPart = inputDateParts.find(element => element.type === 'hours');
-                return DateTimeUtil.getPartValue(this.timePicker.selectedDate, hourPart, hourPart.format.length) === this.value;
+                return DateTimeUtil.getPartValue(this.timePicker.selectedDate, hourPart, hourPart.format.length) === currentValue;
             case 'minuteList':
                 const minutePart = inputDateParts.find(element => element.type === 'minutes');
-                return DateTimeUtil.getPartValue(this.timePicker.selectedDate, minutePart, minutePart.format.length) === this.value;
+                return DateTimeUtil.getPartValue(this.timePicker.selectedDate, minutePart, minutePart.format.length) === currentValue;
             case 'secondsList':
                 const secondsPart = inputDateParts.find(element => element.type === 'seconds');
-                return DateTimeUtil.getPartValue(this.timePicker.selectedDate, secondsPart, secondsPart.format.length) === this.value;
+                return DateTimeUtil.getPartValue(this.timePicker.selectedDate, secondsPart, secondsPart.format.length) === currentValue;
             case 'ampmList':
                 const ampmPart = inputDateParts.find(element => element.format === 'tt');
                 return DateTimeUtil.getPartValue(this.timePicker.selectedDate, ampmPart, ampmPart.format.length) === this.value;