Skip to content

Commit 91ca518

Browse files
Yehuda Globermanpkozlowski-opensource
authored andcommitted
fix(timepicker): display 12 PM/AM when merdian is true
Ref.: https://en.wikipedia.org/wiki/12-hour_clock Fixes #1031 Closes #1033
1 parent c3a7630 commit 91ca518

File tree

2 files changed

+42
-2
lines changed

2 files changed

+42
-2
lines changed

src/timepicker/timepicker.spec.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -521,6 +521,36 @@ describe('ngb-timepicker', () => {
521521
});
522522
}));
523523

524+
it('should render 12 PM/AM as 12:mm and meridian button with proper value', async(() => {
525+
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [meridian]="true"></ngb-timepicker>`;
526+
527+
const fixture = createTestComponent(html);
528+
fixture.componentInstance.model = {hour: 12, minute: 30, second: 0};
529+
const meridianButton = getMeridianButton(fixture.nativeElement);
530+
fixture.detectChanges();
531+
fixture.whenStable()
532+
.then(() => {
533+
fixture.detectChanges();
534+
return fixture.whenStable();
535+
})
536+
.then(() => {
537+
expectToDisplayTime(fixture.nativeElement, '12:30:00');
538+
expect(meridianButton.innerHTML).toBe('PM');
539+
540+
fixture.componentInstance.model = {hour: 0, minute: 30, second: 0};
541+
fixture.detectChanges();
542+
return fixture.whenStable();
543+
})
544+
.then(() => {
545+
fixture.detectChanges();
546+
return fixture.whenStable();
547+
})
548+
.then(() => {
549+
expectToDisplayTime(fixture.nativeElement, '12:30:00');
550+
expect(meridianButton.innerHTML).toBe('AM');
551+
});
552+
}));
553+
524554
it('should update model on meridian click', async(() => {
525555
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [meridian]="true"></ngb-timepicker>`;
526556

src/timepicker/timepicker.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
101101
<template [ngIf]="meridian">
102102
<td>&nbsp;&nbsp;</td>
103103
<td>
104-
<button type="button" class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour > 12 ? 'PM' : 'AM'}}</button>
104+
<button type="button" class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour >= 12 ? 'PM' : 'AM'}}</button>
105105
</td>
106106
</template>
107107
</tr>
@@ -241,7 +241,17 @@ export class NgbTimepicker implements ControlValueAccessor,
241241
}
242242
}
243243

244-
formatHour(value: number) { return padNumber(isNumber(value) ? (value % (this.meridian ? 12 : 24)) : NaN); }
244+
formatHour(value: number) {
245+
if (isNumber(value)) {
246+
if (this.meridian) {
247+
return padNumber(value % 12 === 0 ? 12 : value % 12);
248+
} else {
249+
return padNumber(value % 24);
250+
}
251+
} else {
252+
return padNumber(NaN);
253+
}
254+
}
245255

246256
formatMinSec(value: number) { return padNumber(value); }
247257

0 commit comments

Comments
 (0)