角度时间选择器

Question

我正在为我的项目和时间选择器使用 ng boostrap

https://ng-bootstrap.github.io/#/components/timepicker/examples#meridian

<ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
<button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
Meridian - {{meridian ? "ON" : "OFF"}}
</button>
<hr>
<pre>Selected time: {{time | json}}</pre>

TS

import {Component} from '@angular/core';
@Component({
selector: 'ngbd-timepicker-meridian',
templateUrl: './timepicker-meridian.html'
})
export class NgbdTimepickerMeridian {
time = {hour: 13, minute: 30};
meridian = true;
toggleMeridian() {
this.meridian = !this.meridian;
}
}

问题是我只需要使用 AM 格式而不是显示按钮并允许用户切换 AM 和 PM，我不知道这可能吗？

https://ng-bootstrap.github.io/stackblitzes/timepicker/meridian/stackblitz.html

Answer 1

如果你想要两个时间选择器，一个用于 AM，一个用于 PM，你可以，正如我的评论中所述

<ngb-timepicker [ngModel]="time1" 
(ngModelChange)="time1={hour:$event.hour%12,minute:$event.minute}">
</ngb-timepicker>
<ngb-timepicker [ngModel]="time2" 
(ngModelChange)="time2={hour:12+$event.hour%12,minute:$event.minute}" >
</ngb-timepicker>
<hr>
<pre>
Selected time: {{time1 | json}}
Selected time: {{time2 | json}}
</pre>