修改 dateformat 角度日期选择器

Question

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

目前我有这种格式显示面：7/15/2020 或 MM/DD/YYYYYY。

有几个线程在谈论这个，但没有一个是我想要的或最近的东西。我在 Angular 10 上使用 Angular Material 模板。

history.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>

历史化.component.ts 我试过这个没有成功

import { Component, OnInit, Injectable, ViewChild, ChangeDetectorRef  } from '@angular/core';
import { RestApiService } from '../../shared/rest-api.service';
import { NotificationsService } from '../../shared/notifications.service';
import { FormControl } from '@angular/forms';
import { Observable, of, Subscription } from 'rxjs';
import { tap, startWith, debounceTime, switchMap, map, filter, distinctUntilChanged } from 'rxjs/operators';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';



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

@Injectable({
  providedIn: 'root'
})
  
@Component({
  selector: 'app-historisation-deploiements',
  templateUrl: './historisation-deploiements.component.html',
  styleUrls: ['./historisation-deploiements.component.scss'],
  providers: [
    {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format},
]
})

我希望有人能举个例子来做我想做的事。谢谢！

Answer 1

此答案可满足您的需求。希望没事。

在你的 app.module.ts 上：

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

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

这样，您的日期选择器将在 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 Side 更新如下：

<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>

Answer 2

考虑使用 Angular DatePipe，您可以自定义它以显示您喜欢的任何格式。