Merge pull request #8545 from IgniteUI/bpenkov/timepicker-typing-9.1

Properly parse AM/PM when typing - 9.1

Author: Lipata

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild, NgModule, ElementRef, EventEmitter } from '@angular/core';
+import { Component, ViewChild, NgModule, ElementRef, EventEmitter, DebugElement } from '@angular/core';
 import { async, TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
 import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -1766,7 +1766,10 @@ describe('IgxTimePicker', () => {
 
     describe('Hour/minute only mode', () => {
         configureTestSuite();
-        let fixture, timePicker, dom, input;
+        let fixture: ComponentFixture<IgxTimePickerDropDownSingleHourComponent>,
+            timePicker: IgxTimePickerComponent,
+            dom: DebugElement,
+            input: DebugElement;
 
         beforeEach(
             async(() => {
@@ -1841,6 +1844,21 @@ describe('IgxTimePicker', () => {
             expect(_input.nativeElement.value).toEqual('12 AM');
         }));
 
+        it('Should properly switch between AM/PM when typing', () => {
+            fixture.componentInstance.format = 'hh tt';
+            fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0, 0);
+            fixture.detectChanges();
+
+            input.triggerEventHandler('focus', { target: input.nativeElement });
+            UIInteractions.simulateTyping('pm', input, 2, 4);
+            fixture.detectChanges();
+            expect(input.nativeElement.value).toEqual('05 pm');
+
+            input.triggerEventHandler('blur', { target: input.nativeElement });
+            fixture.detectChanges();
+            expect(input.nativeElement.value).toEqual('05 PM');
+        });
+
         it('Should navigate dropdown lists correctly when format contains only hours.', fakeAsync(() => {
             fixture.componentInstance.format = 'hh tt';
             fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0);

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

@@ -1291,7 +1291,7 @@ export class IgxTimePickerComponent implements
         }
 
         if (this.showAmPmList) {
-            amPM = sections[sections.length - 1];
+            amPM = sections[sections.length - 1].toUpperCase();
 
             if (((this.showHoursList && date.getHours().toString() !== '12') ||
                 (!this.showHoursList && date.getHours().toString() <= '11')) && amPM === 'PM') {