Angular Material 原生datetime-local选择器如何隐藏秒仅显示日期时分

你遇到的功能调整需求不需要引入任何第三方依赖、也不需要编写复杂的CSS样式覆盖，通过HTML原生的标准属性就能完全实现目标。

核心实现逻辑 #

原生datetime-local类型输入框的可选择维度，是由自身的step属性（选择步长）决定的：

• 输入框默认step值为1秒，因此原生选择器会展示秒的选择入口
• 只要将step值设置为60（即步长为1分钟），浏览器就会自动隐藏秒选择项，仅保留年、月、日、小时、分钟的选择维度
• 该属性和Angular Material的mat-form-field、matInput组件完全兼容，不会破坏原有表单的悬浮标签、轮廓外观、内置校验逻辑

调整后的完整代码 #

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>Start Date</mat-label>
  <input 
    matInput
    type="datetime-local" 
    placeholder="Start Date"
    step="60"
  >
</mat-form-field>

常见注意点 #

• 该实现为HTML标准定义的原生控件能力，适配Chrome、Edge、Firefox 100+等所有支持datetime-local的主流浏览器，不存在自定义样式带来的兼容性断层。
• 不要将step值设置为小于60的数值，否则浏览器会重新渲染出秒、甚至毫秒的选择项，无法达到隐藏秒选项的效果。

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