Angular 角度材质2日期选择器-动态格式

我需要根据一些用户设置以两种不同的格式显示日期

比如说

“YYYY-MM-DD”

和

“DD/MM/YYYY”

我知道我必须编写一个自定义的

DateAdapter

（我已经这样做了），但是否可以使用下拉列表等在这两种格式之间切换？

附笔。

---

我还使用了Moment.js。

您的自定义日期格式位于TS文件中

这意味着您可以访问Javascript和Typescript

您可以使用localStorage以日期格式存储格式：

export const CUSTOM_DATE_FORMAT = {
  parse: {
    dateInput: localStorage.getItem('dateFormat'),
  },
  display: {
    dateInput: localStorage.getItem('dateFormat'),
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'DD/MM/YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

---

我认为您将了解如何将格式存储在本地存储中；）

在下面，您可以看到使用本地存储的自定义适配器。这样，您就不必重新加载窗口

import { MomentDateAdapter, MatMomentDateAdapterOptions } from "@angular/material-moment-adapter";
import { Moment } from "moment";
import { UserService } from "app/core/api/user.service";

export class CustomDateAdapter extends MomentDateAdapter {

    parse(value: any, parseFormat: string | string[]): Moment | null {
        let dateFormat: string | string[] = localStorage.getItem("dateFormat") || parseFormat;
        return super.parse(value, dateFormat);
    }

    format(date: Moment, displayFormat: string): string {
        let dateFormat: string | string[] = localStorage.getItem("dateFormat") || displayFormat;
        return super.format(date, dateFormat);
    }

}

在您的模块中：

....
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
import { CustomDateAdapter } from 'app/material/custom-date-adapter';

....
providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
]})
export class MaterialModule { }

---

请注意，这个例子使用了DateAdapter的momentjs实现。

谢谢，它可以工作！你有没有想法，如何在不重新加载窗口的情况下完成？如果没有，我会接受这个答案，因为它肯定是有效的。为了避免重新加载窗口，您需要重写声明自定义日期适配器的模块。我不知道怎么做，对不起：/