Angular 修改日期格式角度日期选择器

我不知道如何将日期格式更改为此DD/MM/YYYYY格式，以及如何检索YYYYY-MM-DD，在没有“T00:00:00Z”波浪号的情况下，我会将其添加到其中

目前我有这种格式的显示端：2020年7月15日或YYYY年/月/日

有几个帖子都在讨论这个问题，但没有一个是针对我想要的或是最近的东西。我在Angular 10上，有一个Angular材质模板

historization.component.html

<mat-form-field appearance="fill" >
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</mat-card-content>

---

我希望有人能为我树立榜样。谢谢

考虑使用您可以自定义的角度符号来显示您想要的任何格式。

这个答案符合您的需要。希望没问题

在您的app.module.ts上：

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

...
...
{ provide: LOCALE_ID, useValue: 'fr-FR' }

这样，datepicker就可以在FR中显示数据。 现在将其转换为组件中的另一个对象：

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

On your constrcutor : private datePipe: DatePipe


Create a function for testing : 
const SearchStartDate = this.datePipe.transform(this.range.value.start,'yyyy-MM-dd');
const SearchEndDate = this.datePipe.transform(this.range.value.end,'yyyy-MM-dd');
console.log(SearchStartDate);
console.log(SearchEndDate);

在app.module端：

import { DatePipe } from '@angular/common';
Add Provider : DatePipe

Html端更新如下：

<mat-date-range-input [rangePicker]="picker" [formGroup]="range">
    <input matStartDate placeholder="Start date" formControlName="start">
    <input matEndDate placeholder="End date" formControlName="end">
  </mat-date-range-input>
  
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

---

Sry它根本不对我解释的内容做出响应。。说到mat日期范围的问题，你想让我转换一个简单的日期。

<mat-date-range-input [rangePicker]="picker" [formGroup]="range">
    <input matStartDate placeholder="Start date" formControlName="start">
    <input matEndDate placeholder="End date" formControlName="end">
  </mat-date-range-input>
  
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>