隐藏角度日期选择器输入中的秒数

Question

我正在使用角度日期选择器，我想隐藏输入框中的秒数

<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)"
                           />
        <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'"
                          [stepHour]="1">
        </ngx-mat-datetime-picker>
</mat-form-field>

<span style="color: red;">- {{formattedEDTA}} -</span>

然后在我的ts中

private _selectedData;
formattedEDTA: string;

 set selectedData(value: any) {
        this_selectedData= value;
        this.formattedEDTA = this.formatDate(value.EDTA);
    }

    get selectedData(): any {
        return this._selectedData;
    }

formatDate(date: Date | moment.Moment): string {
        return moment(date).isValid() ? moment(date).format('DD/MM/YYYY HH:mm') : '';
    }
dateChanged(event: any): void {
        if (event.value) {
            this._selectedData.EDTA = event.value;
            this.formattedEDTA = this.formatDate(event.value);
        }
    }

最初它在输入中没有显示任何值，但在跨度值中存在

formattedEDTA

27/06/2024 23:37

当我更改日期时，它在日期输入中显示

19/06/2024, 00:00:00

，但在跨度中它显示

19/06/2024 00:00

我错过了什么吗？输入日期框中的日期也应该是正确的

更新1

我在我的模块中尝试过这样的

export const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
    parse: {
        dateInput: 'DD/MM/YYYY HH:mm',
    },
    display: {
        dateInput: 'DD/MM/YYYY HH:mm',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

以及我的提供商

providers: [
        MatIconRegistry,
        DatePipe,
        MatDatepickerModule,
        NgxMatDatetimePickerModule,
        {
            provide: LOCALE_ID,
            useValue: 'sv',
        },
        {
            provide: LOCALE_ID,
            useValue: 'nb',
        },
        {
            provide: LOCALE_ID,
            useValue: 'en',
        },
        { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
        { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
    ]

但现在这很引人注目

Answer 1

您面临的问题似乎与日期格式如何应用于输入字段有关。尽管您进行了配置，

ngx-mat-datetime-picker

可能会在输入字段中显示带秒的日期。

要解决此问题，您需要确保日期格式正确应用于输入字段值。实现此目的的一种方法是使用 Angular 的内置

DatePipe

来格式化输入字段中显示的日期。

具体操作方法如下：

1. 在组件中导入

   DatePipe

   ：

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

2. 将

   DatePipe

   注入到您的组件中：

   constructor(private datePipe: DatePipe) {}
   

3. 更新您的

   formatDate

   方法以使用

   DatePipe

   :

   formatDate(date: Date | moment.Moment): string {
       return this.datePipe.transform(date, 'dd/MM/yyyy HH:mm');
   }
   

4. 将

   formattedEDTA

   属性直接绑定到

   matInput

   :

   <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)"
             [value]="formattedEDTA" />
       <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'"
             [stepHour]="1">
       </ngx-mat-datetime-picker>
   </mat-form-field>
   
   <span style="color: red;">- {{formattedEDTA}} -</span>
   

进行这些更改后，日期输入字段应显示格式化的日期，不带秒。关键点是确保保存格式化日期的

formattedEDTA

属性通过

[value]="formattedEDTA"

直接绑定到输入字段。

此外，请确保您的组件正确注册为

DatePipe

:

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  providers: [DatePipe]
})
export class YourComponent {
  private _selectedData;
  formattedEDTA: string;

  constructor(private datePipe: DatePipe) {}

  set selectedData(value: any) {
    this._selectedData = value;
    this.formattedEDTA = this.formatDate(value.EDTA);
  }

  get selectedData(): any {
    return this._selectedData;
  }

  formatDate(date: Date | moment.Moment): string {
    return this.datePipe.transform(date, 'dd/MM/yyyy HH:mm');
  }

  dateChanged(event: any): void {
    if (event.value) {
      this._selectedData.EDTA = event.value;
      this.formattedEDTA = this.formatDate(event.value);
    }
  }
}

这应确保日期输入字段和跨度显示相同格式的日期，不带秒。