Question

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

我们说"YYYY-MM-DD"和"DD/MM/YYYY"。

我知道我必须编写一个自定义DateAdapter（我已经这样做了），但是可以在两种格式之间进行切换，例如：下拉列表？

附：我也在使用Moment.js。

Answer 1

您的自定义日期格式位于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',
  },
};

我认为您将弄清楚如何在本地存储中存储格式;）

Answer 2

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

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实现。

Angular Material2 datepicker - 动态格式

2 个答案: