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

Question

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

<input type="time">

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

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