Angular 8 - 如何在 saturn-datepicker 中格式化日期

Question

我想将日期格式显示为yyyy-mm-dd。我安装了包 saturn-datepicker 但我不知道如何更改格式。您能帮我介绍一下更改日期格式的方法吗？

Answer 1

解决方案 1：使用@angular/material-moment-adapter

第 1 步： 安装 @angular/material-moment-adapter。

npm install @angular/material-moment-adapter

第 2 步：

1. 从saturn-datepicker 导入常量。
2. 定义日期格式。

app.module.ts

import {
  MAT_DATE_FORMATS,
  DateAdapter,
  MAT_DATE_LOCALE
} from 'saturn-datepicker';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

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

@NgModule({
  ...
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ]
})
export class AppModule {}

Sample Solution 1 on StackBlitz

---

解决方案 2：构建自己的 DateAdapter

第 1 步：创建自定义 AppDateAdapter。

date.adapter.ts

import { NativeDateAdapter } from "@angular/material/core";


export class AppDateAdapter extends NativeDateAdapter {

    format(date: Date, displayFormat: Object): string {
        var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

        if (month.length < 2) 
            month = '0' + month;
        if (day.length < 2) 
            day = '0' + day;

        return [year, month, day].join('-');
    }
}

第 2 步：

1. 将AppDateAdapter 导入providers 部分。
2. 定义日期格式。

app.module.ts

import { MAT_DATE_FORMATS, DateAdapter } from 'saturn-datepicker';
import { AppDateAdapter } from './date.adapter';

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

@NgModule({
  ...
  providers: [
     { provide: DateAdapter, useClass: AppDateAdapter },
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ]
})
export class AppModule {}

Sample solution 2 on StackBlitz

---

参考

How to change date format or locale?

Answer 2

如果您不想构建自己的适配器，请尝试此演示（带屏蔽）

https://stackblitz.com/edit/angular-material-date-5srxwu?file=src/app/app.component.html