Question

我无法弄清楚如何将日期格式更改为DD / MM / YYYYY格式，以及如何检索YYYYY-MM-DD，在没有'T00：00：00Z'波浪号的情况下将其添加到其中。 / p>

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

有几个主题在谈论这个，但是没有一个关于我想要的东西或最近的事情。我在使用Angular Material模板的Angular 10。

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

historisation.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，您可以对其进行自定义以显示所需的任何格式。

修改dateformat角度日期选择器

2 个答案: