Angular 所选日期的角度格式显示不正确

我使用NgxMatDatetimePickerModule获得一个日期选择器，它能够在两种浏览器（chrome和safari）中选择日期和时间。它工作得非常好

我的问题是显示格式。它只显示dd/mm/yyyy

我怎样才能解决这个问题？我需要一个解决方案，这是工作的铬和safari

谢谢

 <div class="field">
            <label class="label">Date & Time</label>
            <div class="control">
              <input
                matInput
                [ngxMatDatetimePicker]="picker"
                #date="ngModel"
                [(ngModel)]="manualData.date"
                name="date"
                class="input"
                style="width: 175px"
                placeholder="YYYY-MM-DD HH:mm:ss"
                required
              />
              <mat-datepicker-toggle
                matSuffix
                [for]="picker"
              ></mat-datepicker-toggle>
              <ngx-mat-datetime-picker
                #picker
                [showSpinners]="showSpinners"
                [showSeconds]="showSeconds"
                [stepHour]="stepHour"
                [stepMinute]="stepMinute"
                [stepSecond]="stepSecond"
                [touchUi]="touchUi"
                [color]="color"
              >
              </ngx-mat-datetime-picker>
              <p class="help is-danger" *ngIf="date.invalid">
                This field is required
              </p>
            </div>
          </div>

日期和时间

此字段必填

添加到下面的类中

import { NativeDateAdapter } from '@angular/material';

export class AppDateAdapter extends NativeDateAdapter {

  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
  format(date: Date, displayFormat: string): string {
    if (displayFormat == "input") {
      let day = date.getDate();
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
    } else if (displayFormat == "inputMonth") {
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(month) + '/' + year;
    } else {
      return date.toDateString();
    }
  }

  private _to2digit(n: number) {
    return ('00' + n).slice(-2);
  }
}

export const APP_DATE_FORMATS =
{
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'inputMonth',
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
}

在Module.ts文件中导入它

import { AppDateAdapter, APP_DATE_FORMATS } from './Models/app-date-adapter';
import { MatDialogModule, MatDatepickerModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';

在“提供者”部分添加如下内容：

providers: [MatDatepickerModule,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }],

它可以解决你的问题

添加到下面的类中

import { NativeDateAdapter } from '@angular/material';

export class AppDateAdapter extends NativeDateAdapter {

  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
  format(date: Date, displayFormat: string): string {
    if (displayFormat == "input") {
      let day = date.getDate();
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
    } else if (displayFormat == "inputMonth") {
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(month) + '/' + year;
    } else {
      return date.toDateString();
    }
  }

  private _to2digit(n: number) {
    return ('00' + n).slice(-2);
  }
}

export const APP_DATE_FORMATS =
{
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'inputMonth',
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
}

在Module.ts文件中导入它

import { AppDateAdapter, APP_DATE_FORMATS } from './Models/app-date-adapter';
import { MatDialogModule, MatDatepickerModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';

在“提供者”部分添加如下内容：

providers: [MatDatepickerModule,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }],

它可以解决您的问题

检查此项：检查此项：