fix(timepicker): display 12 PM/AM when merdian is true

Ref.: https://en.wikipedia.org/wiki/12-hour_clock Fixes #1031 Closes #1033
ng-bootstrap · Nov 13, 2016 · 91ca518 · 91ca518
1 parent c3a7630
commit 91ca518
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -521,6 +521,36 @@ describe('ngb-timepicker', () => {
              });
        }));
 
+    it('should render 12 PM/AM as 12:mm and meridian button with proper value', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [meridian]="true"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 12, minute: 30, second: 0};
+         const meridianButton = getMeridianButton(fixture.nativeElement);
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expectToDisplayTime(fixture.nativeElement, '12:30:00');
+               expect(meridianButton.innerHTML).toBe('PM');
+
+               fixture.componentInstance.model = {hour: 0, minute: 30, second: 0};
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expectToDisplayTime(fixture.nativeElement, '12:30:00');
+               expect(meridianButton.innerHTML).toBe('AM');
+             });
+       }));
+
     it('should update model on meridian click', async(() => {
          const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [meridian]="true"></ngb-timepicker>`;
 

diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -101,7 +101,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
           <template [ngIf]="meridian">
             <td>&nbsp;&nbsp;</td>
             <td>
-              <button type="button" class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour > 12 ? 'PM' : 'AM'}}</button>
+              <button type="button" class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour >= 12 ? 'PM' : 'AM'}}</button>
             </td>
           </template>
         </tr>
@@ -241,7 +241,17 @@ export class NgbTimepicker implements ControlValueAccessor,
     }
   }
 
-  formatHour(value: number) { return padNumber(isNumber(value) ? (value % (this.meridian ? 12 : 24)) : NaN); }
+  formatHour(value: number) {
+    if (isNumber(value)) {
+      if (this.meridian) {
+        return padNumber(value % 12 === 0 ? 12 : value % 12);
+      } else {
+        return padNumber(value % 24);
+      }
+    } else {
+      return padNumber(NaN);
+    }
+  }
 
   formatMinSec(value: number) { return padNumber(value); }