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

问题描述

可以通过按钮更改日期格式吗？例如，默认格式是 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>

感谢您的帮助。

解决方法

您正在定义一个固定的 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);
  }

你可以看到a stackblitz using MomentAdapter

你可以看到a stackblitz using CustomDateAdapter

,

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

请检查这个例子 https://stackblitz.com/edit/angular-mat-datepicker-xrwgmu?file=app/datepicker-overview-example/datepicker-overview-example.component.ts

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

这是在 style.css 中

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

并且 format 可以动态更改