如何更改 Angular 材料日期范围选择器的日期格式？

Question

如何在 Angular Materials 日期范围选择器中将日期格式更改为自定义格式？

例如，对于另一种日期格式：DD/MM/YYYY

基本日期范围选择器：

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

基本日期范围选择器如Stackblitz。

Answer 1

这很简单。首先在您的组件导入中如下。

import { NativeDateAdapter, MatDateFormats } from '@angular/material';
import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';

现在创建一个扩展 NativeDateAdapter 的类“AppDateAdapter”。参见以下内容

export class AppDateAdapter extends NativeDateAdapter {
      format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
  let day: string = date.getDate().toString();
  day = +day < 10 ? '0' + day : day;
  let month: string = (date.getMonth() + 1).toString();
  month = +month < 10 ? '0' + month : month;
  let year = date.getFullYear();
  return `${day}-${month}-${year}`;
}
return date.toDateString();
}}

创建常量 APP_DATE_FORMATS

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

在您的组件中添加提供程序

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
  providers: [
    {provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}
  ]
})

现在，每当您从 datepicker 更改日期时，它都会以“dd-mm-yyyy”格式显示，因为我们已在AppDateAdapter中声明了该格式。你可以改变这一点。

Answer 2

根据此处找到的官方文档，进行了一些细微的调整：找到这里

将以下内容添加到您的 app.module.ts / 主模块文件导入部分（在此处查看显示格式）：

    import { MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
    import { MomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
        export const MY_FORMATS = {
          parse: {
            dateInput: 'LL',
          },
          display: {
            dateInput: 'LL',
            monthYearLabel: 'MMM YYYY',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM YYYY',
          },
        };
    
        @NgModule({
          imports: [
        
          MatDatepickerModule,
          MatNativeDateModule,
          MomentDateModule,
        ],
        ....

将以下内容添加到 app.module.ts / main 模块中的提供者部分

providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

确保安装 moment.js：

npm install moment --save

在您的组件中导入以下内容：

import * as moment from 'moment';

在您的组件（反应式表单）中绑定您的输入字段，记下时刻（your_start_date）：

this.theForm = this.formBuilder.group({
      startDate: [moment(this.service.filter.startDate), [Validators.required]],
      endDate: [moment(this.service.filter.endDate), [Validators.required]]
      })
    });

将其添加到您的模板中

    <mat-form-field>
           <mat-label>Date Range</mat-label>
           <mat-date-range-input [rangePicker]="dateRangePicker" >
                <input matStartDate formControlName="startDate" placeholder="Start date">
                <input matEndDate formControlName="endDate" placeholder="End date">
           </mat-date-range-input>
           <mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
           <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
   </mat-form-field>