fix(timepicker): respect meridian setting when entring hours

Fixes #1631 Closes #1636
ng-bootstrap · Jul 11, 2017 · 62c5ae3 · 62c5ae3
1 parent 0512bfc
commit 62c5ae3
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 1 deletion.
diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -669,6 +669,78 @@ describe('ngb-timepicker', () => {
       expect(fixture.componentInstance.model).toBeNull();
     });
 
+    it('should respect meridian when propagating model (PM)', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [meridian]="true"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 14, minute: 30};
+         fixture.detectChanges();
+
+         const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+         fixture.whenStable()
+             .then(() => {
+               inputs[0].triggerEventHandler('change', createChangeEvent('3'));
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => { expect(fixture.componentInstance.model).toEqual({hour: 15, minute: 30, second: 0}); });
+       }));
+
+    it('should respect meridian when propagating model (AM)', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [meridian]="true"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 9, minute: 30};
+         fixture.detectChanges();
+
+         const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+         fixture.whenStable()
+             .then(() => {
+               inputs[0].triggerEventHandler('change', createChangeEvent('10'));
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => { expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0}); });
+       }));
+
+    it('should interpret 12 as midnight (00:00) when meridian is set to AM', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [meridian]="true"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 9, minute: 0};
+         fixture.detectChanges();
+
+         const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+         fixture.whenStable()
+             .then(() => {
+               inputs[0].triggerEventHandler('change', createChangeEvent('12'));
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => { expect(fixture.componentInstance.model).toEqual({hour: 0, minute: 0, second: 0}); });
+       }));
+
+    it('should interpret 12 as noon (12:00) when meridian is set to PM', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [meridian]="true"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 18, minute: 0};
+         fixture.detectChanges();
+
+         const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+         fixture.whenStable()
+             .then(() => {
+               inputs[0].triggerEventHandler('change', createChangeEvent('12'));
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => { expect(fixture.componentInstance.model).toEqual({hour: 12, minute: 0, second: 0}); });
+       }));
+
     it('should not submit form when spinners clicked', async(() => {
          const html = `<form (ngSubmit)="onSubmit()">
            <ngb-timepicker name="control" [(ngModel)]="model"></ngb-timepicker>

diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -222,7 +222,9 @@ export class NgbTimepicker implements ControlValueAccessor,
   }
 
   updateHour(newVal: string) {
-    this.model.updateHour(toInteger(newVal));
+    const isPM = this.model.hour >= 12;
+    const enteredHour = toInteger(newVal);
+    this.model.updateHour((this.meridian ? enteredHour % 12 : enteredHour) + (this.meridian && isPM ? 12 : 0));
     this.propagateModelChange();
   }