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

Question

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

<input type="time">

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

Answer 1

尽管我真正在寻找的时间选择器就像HTML5中的时间选择器一样，但是没有AM / PM，但我使用了@MoshFeu的建议，即Ngx材质时间选择器

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

Popup 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小时格式输入时间。