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

Question

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

<input type="time">

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

标签： angularhtmlangular6angular7timepicker

Answer 1

虽然我真正在寻找的时间选择器就像 HTML5 中的时间选择器，但没有 AM/PM，但我使用了 @MoshFeu 的建议，即 Ngx Material Timepicker

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