Angular 动态更改mat datepicker中的日期格式

是否可以通过按钮更改日期格式？例如，默认格式是DD/MM/YYYY，但当我单击按钮时，我会注册新格式，例如yyy/MM/DD，是否可能？我是从这个代码开始的：

ts文件的一部分

const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
    parse: {
        dateInput: 'DD/MM/YYYY',
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD/MM/YYYY',
        monthYearA11yLabel: 'MM YYYY',
    },
};


providers: [{
        provide: DateAdapter,
        useClass: MomentDateAdapter,
        deps: [MAT_DATE_LOCALE]
    },
    {
        provide: MAT_DATE_FORMATS,
        useValue: MY_FORMATS
    },
]



changeFormat() {
    ????????
}

html文件：

   <input matInput [matDatepicker]="picker" placeholder="mm.dd.yyyy"
                      (click)="picker.open()" #birthInput>
               <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
               <mat-datepicker #picker></mat-datepicker>
 <span (click)="changeFormat()"></span>

---

谢谢您的帮助。

您正在定义一个固定的MY_格式，但是您可以定义一个类似

export class MyFormat{
  value=1;
  constructor(){}
  get display(){
    return this.value==1?
     {
        dateInput: 'LL',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
      }:{
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD/MM/YYYY',
        monthYearA11yLabel: 'MM YYYY',
    }
  }
  get parse(){
    return this.value==1?{
        dateInput: 'LL',
      }:{
      dateInput: 'DD/MM/YYYY'
      }
  }
  
}

然后在提供程序中使用这个类

  providers: [
    {provide: MAT_DATE_FORMATS, useClass: MyFormat},
  ],

最后，在组件的构造函数中注入访问变量“value”的提供程序

那么，您需要在更改格式时“重画”日期表单，例如

  change(){
    this.config.value=this.config.value==1?2:1 //we change the "value"
    this.date=new FormControl(this.date.value)  //give the value
  }

但是，请小心，您需要使用CustomDateAdapter或MomentDateAdapter

使用MomentDateAdapter将其导入模块

MomentDateModule

@NgModule({
  imports: [
    ...
    MomentDateModule,
  ],

如果要使用CustomDateAdapter，可以使用类似的

export class CustomDateAdapter extends NativeDateAdapter {

  formato="YYY/MM/DD"
  parse(value: any) {
    const parts = value.match(/\d{1,4}/g);
    if (parts && parts.length == 3) {
      const order = this.formato.match(/Y{2,4}|M{1,2}|D{1,2}/g);
      if (order) {
        const year = +parts[
          order.indexOf("YYYY") < 0
            ? order.indexOf("YY")
            : order.indexOf("YYYY")
        ];
        const month = +parts[
          order.indexOf("MM") < 0 ? order.indexOf("M") : order.indexOf("MM")
        ];
        const day = +parts[
          order.indexOf("DD") < 0 ? order.indexOf("D") : order.indexOf("DD")
        ];
        return new Date(year<100?year+2000:year, month - 1, day);
      }
    }
    return null;
  }
  format(date: any, displayFormat: any): string {
    if (displayFormat=="MMM YYYY")
      return this.getMonthNames('long')[date.getMonth()]+' '+date.getFullYear()

    const result= displayFormat
      .replace("YYYY", date.getFullYear())
      .replace("YY", date.getYear())
      .replace("MMM", this.getMonthNames('long')[date.getMonth()])
      .replace("MM", ("00" + (date.getMonth() + 1)).slice(-2))
      .replace("M", date.getMonth() + 1)
      .replace("DD", ("00" + date.getDate()).slice(-2))
      .replace("M", date.getDate())
      return result;
  }
}

你可以看到

---

您可以看到

您可以为此使用当前的解决方法

请检查这个例子

并且

格式可以动态更改

export class CustomDateAdapter extends NativeDateAdapter {

  formato="YYY/MM/DD"
  parse(value: any) {
    const parts = value.match(/\d{1,4}/g);
    if (parts && parts.length == 3) {
      const order = this.formato.match(/Y{2,4}|M{1,2}|D{1,2}/g);
      if (order) {
        const year = +parts[
          order.indexOf("YYYY") < 0
            ? order.indexOf("YY")
            : order.indexOf("YYYY")
        ];
        const month = +parts[
          order.indexOf("MM") < 0 ? order.indexOf("M") : order.indexOf("MM")
        ];
        const day = +parts[
          order.indexOf("DD") < 0 ? order.indexOf("D") : order.indexOf("DD")
        ];
        return new Date(year<100?year+2000:year, month - 1, day);
      }
    }
    return null;
  }
  format(date: any, displayFormat: any): string {
    if (displayFormat=="MMM YYYY")
      return this.getMonthNames('long')[date.getMonth()]+' '+date.getFullYear()

    const result= displayFormat
      .replace("YYYY", date.getFullYear())
      .replace("YY", date.getYear())
      .replace("MMM", this.getMonthNames('long')[date.getMonth()])
      .replace("MM", ("00" + (date.getMonth() + 1)).slice(-2))
      .replace("M", date.getMonth() + 1)
      .replace("DD", ("00" + date.getDate()).slice(-2))
      .replace("M", date.getDate())
      return result;
  }
}

constructor(@Inject(MAT_DATE_FORMATS) private config: MyFormat,
            @Inject(DateAdapter) private customDateAdapter:CustomDateAdapter) {
    this.config.value = 1;
    this.customDateAdapter.formato='YYYY/MM/DD'
  }

  change() {
    this.config.value = this.config.value == 1 ? 2 : 1;
    this.customDateAdapter.formato=this.config.value==1?'DD/MM/YYYY' : 'YYYY/MM/DD';
    this.date = new FormControl(this.date.value);
  }

<mat-form-field class="mt-2">
    <input
          matInput
          placeholder="Date"
          (focus)="datePicker.open();"
          [value]="dateInput.value | date:format">
    <input
          #dateInput
          class="hidden-dateinput"
          [matDatepicker]="datePicker">
    <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
    <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

.hidden-dateinput {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
}