Angular日期选择器输入框隐藏秒数的实现咨询

看起来你已经在配置ngx-mat-datetime-picker的时候做了不少正确的设置，但还是遇到输入框显示秒数的问题对吧？我来帮你梳理下几个关键的调整点，确保输入框只显示到分钟：

• 首先，确保日期值的格式化逻辑正确
  你用[(ngModel)]="formattedEDTA"绑定到输入框，这里要保证formattedEDTA是严格按照DD/MM/YYYY HH:mm格式生成的字符串，而不是带秒数的原始Date对象。可以在组件里借助Angular的DatePipe来处理日期变更后的格式化：

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  formattedEDTA: string;

  constructor(private datePipe: DatePipe) {}

  dateChanged(event: any) {
    // 当选择日期后，将值格式化为不带秒数的格式
    if (event.value) {
      this.formattedEDTA = this.datePipe.transform(event.value, 'dd/MM/yyyy HH:mm');
    }
  }
}

注意格式字符串的大小写：dd是两位日期，MM是两位月份，yyyy是四位年份，HH是24小时制小时，mm是分钟。

• 确认日期选择器的配置没有被覆盖
  你已经设置了[showSeconds]="false"和[dateFormat]="'DD/MM/YYYY HH:mm'"，这两个是核心配置，但要检查：

  1. 有没有拼写错误（比如dateFormat的引号是否正确，showSeconds是不是布尔值）
  2. 全局配置或者父组件有没有覆盖当前组件的日期选择器设置

• 优化输入框的绑定逻辑
  如果输入框还是偶尔显示秒数，可以给formattedEDTA加一个setter，确保输入的内容始终被截断到分钟：

private _formattedEDTA: string;
get formattedEDTA(): string {
  return this._formattedEDTA;
}
set formattedEDTA(value: string) {
  if (value && value.includes(':')) {
    // 拆分日期和时间部分，只保留小时和分钟
    const [datePart, timePart] = value.split(' ');
    const [hours, minutes] = timePart.split(':').slice(0, 2);
    this._formattedEDTA = `${datePart} ${hours}:${minutes}`;
  } else {
    this._formattedEDTA = value;
  }
}

最后给你整理好的完整模板代码，标注了关键配置：

<mat-form-field class="input-ff transparent-bg no-warning underline-prefix">
  <mat-label>{{ 'EstimatedArrivalTime' | translate }}</mat-label>
  <mat-icon matPrefix class="fill-underline">info</mat-icon>

  <input matInput [ngxMatDatetimePicker]="picker" [(ngModel)]="formattedEDTA"
         (dateChange)="dateChanged($event)"
         placeholder="DD/MM/YYYY HH:mm"/>
  <mat-hint style="color: black;">DD/MM/YYYY HH:mm</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  
  <!-- 核心配置：隐藏秒数选择器 + 指定输出格式 -->
  <ngx-mat-datetime-picker #picker 
                           [showSpinners]="true" 
                           [showSeconds]="false"
                           [pickerType]="'calendar'" 
                           [startView]="'month'" 
                           [dateFormat]="'DD/MM/YYYY HH:mm'">
  </ngx-mat-datetime-picker>
</mat-form-field>

如果还是有问题，可以检查一下ngx-mat-datetime-picker的依赖版本，升级到最新稳定版可能会解决一些旧版本的兼容bug。

备注：内容来源于stack exchange，提问作者Code Guru