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

Question

可以通过按钮更改日期格式吗？例如，默认格式是 DD/MM/YYYY，但是当我单击按钮时，我会注册新格式，例如 YYYY/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>

谢谢你的帮助。

Answer 1

您正在定义一个固定的 MY_FORMAT，但您可以定义一个类，例如

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},
  ],

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

  constructor(@Inject(MAT_DATE_FORMATS) public config: MyFormat){}

好吧，您需要在更改格式时“重绘”dateForm，例如

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

然后您在构造函数中注入适配器并更改“formato”值

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);
  }

您可以使用 MomentAdapter 看到 stackblitz

您可以使用 CustomDateAdapter 看到 stackblitz