File tree Expand file tree Collapse file tree 2 files changed +42
-2
lines changed Expand file tree Collapse file tree 2 files changed +42
-2
lines changed Original file line number Diff line number Diff line change @@ -521,6 +521,36 @@ describe('ngb-timepicker', () => {
521
521
} ) ;
522
522
} ) ) ;
523
523
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
+
524
554
it ( 'should update model on meridian click' , async ( ( ) => {
525
555
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [meridian]="true"></ngb-timepicker>` ;
526
556
Original file line number Diff line number Diff line change @@ -101,7 +101,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
101
101
<template [ngIf]="meridian">
102
102
<td> </td>
103
103
<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>
105
105
</td>
106
106
</template>
107
107
</tr>
@@ -241,7 +241,17 @@ export class NgbTimepicker implements ControlValueAccessor,
241
241
}
242
242
}
243
243
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
+ }
245
255
246
256
formatMinSec ( value : number ) { return padNumber ( value ) ; }
247
257
You can’t perform that action at this time.
0 commit comments