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

Posted 2023-03-05

【中文标题】如何使输入类型 TIME 24 小时格式？

【英文标题】：How To Make Input Type TIME 24-hr Format?

【发布时间】：2019-07-25 11:12:36

【问题描述】：

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

<input type="time">

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

【问题讨论】：

agranom.github.io/ngx-material-timepicker 呢？

我会试试这个，但它似乎只有 AM/PM 选项。谢谢

他们也有 24 种格式的例子

谢谢。我会回复你，以防它不起作用;）

【参考方案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>

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

对于 CSS，您可以在类中使用 :host /deep/ 更改颜色

例子：

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

【讨论】：

The documentation 没有显示将<input> 放在<mat-form-field> 中，但我无法让它工作，直到我这样做。

你需要输入域来触发这个时钟

对，我有输入，这是我缺少的 mat-form-field，文档中没有显示

【参考方案2】：

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

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

【讨论】：

我看到您正在尝试弄清楚如何内联显示您的标记。在代码前后的行上使用三个反引号 (`) 将其显示为代码块。或者将您的标记缩进四个空格。还有一些 UI 控件可以帮助解决这个问题。

这对我不起作用。 type="time" 显示带有 AM/PM 的时间选择器。但是type="time-24" 没有给我任何东西，并且完全删除了时间选择器。