Angular 时间选择器

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

如果你想要两个时间选择器，一个用于上午，一个用于下午，你可以在我的评论中说

<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>

Angular 时间选择器

Angular timepicker

angular

timepicker

ng-bootstrap