如何使输入类型TIME 24小时格式？

Question

我有这个 Angular 7 个项目使用 Angular Material。我还在输入标签中使用了时间类型 (HTML5)

<input type="time">

但我希望它是 24 小时格式（不显示 AM/PM 选项）。我一直在寻找解决方案，但 none 适合 Angular Material 项目。

Answer 1

尽管我真正想要的时间选择器就像 HTML5 中的那个，但没有 AM/PM，我使用了@MoshFeu 的建议，即 Ngx Material 时间选择器

<mat-form-field>
  <input matInput class="timepicker" [ngxTimepicker]="pickerTwo" [format]=24 placeholder="End" [(ngModel)]="data.formData.end">
</mat-form-field>


<ngx-material-timepicker 
    #picker
    [enableKeyboardInput]=true>
</ngx-material-timepicker>

弹出式时间选择器：时间可以用静态冒号编辑（不仅仅是选择时钟中的数字）。也有 24 小时格式的验证，可以按向上或向下键进行递增和递减。

对于 CSS，您可以使用类

中的 :host /deep/ 更改颜色

示例：

:host /deep/ .timepicker__header {
    background-color: #FF7043 !important;
}

Answer 2

<input matInput type="time-24" [(ngModel)]="timemodel.start">

这解决了我的问题。这使得在 Chrome 和 FireFox 上都可以输入 24 小时格式的时间。

如何使输入类型TIME 24小时格式？

How To Make Input Type TIME 24-hr Format?

angular

html

angular6

angular7

timepicker