Angular项目中如何设置HTML5 time输入框的分钟间隔？

可以通过HTML5 <input type="time"> 的step属性实现这个需求，具体方案如下：

核心实现：使用step属性 #

HTML5的time输入控件支持step属性，单位为秒。30分钟等于1800秒，设置step="1800"后，分钟选项只会显示00和30两个值。

修改你的组件模板代码：

<div class="start">
   <p>Inicio:</p>
   <input type="time" class="form-control" step="1800"/>
</div>

Angular表单场景适配 #

如果项目使用Angular表单（模板驱动或响应式），只需保留step属性即可完成适配：

模板驱动表单示例 #

<div class="start">
   <p>Inicio:</p>
   <input type="time" class="form-control" step="1800" [(ngModel)]="startTime" name="startTime"/>
</div>

响应式表单示例 #

组件类中定义表单控件：

import { FormControl, FormGroup } from '@angular/forms';

// 组件类内代码
myForm = new FormGroup({
  startTime: new FormControl('', { nonNullable: true })
});

对应模板代码：

<div class="start">
   <p>Inicio:</p>
   <input type="time" class="form-control" step="1800" formControlName="startTime"/>
</div>

补充说明 #

• 该属性不仅会限制下拉选项，还会阻止用户手动输入非00/30的分钟值，浏览器会自动将非法输入修正为最近的合法值。
• 不同浏览器的time控件UI可能略有差异，但step属性的行为遵循HTML5标准，表现一致。

内容的提问来源于stack exchange，提问作者carloslopez