以反应形式格式化日期

Question

目前它显示 1/4/2022 ，它应该显示 01/04/2022（它应该是这种格式），问题是，有没有一种方法可以使用基于我的示例的反应形式来实现这种格式下面的模型？谢谢。

我们如何从这里格式化它 transactionStartDate: [this.model.transactionStartDate ||新日期（）]， ?是否需要日期 fns 工具？

#html代码

 <mat-form-field appearance="fill" class="transaction-control-filter" fxFlex="100">
                <mat-label class="transaction-detail-header-label">Transaction Start Date</mat-label>
                <input matInput [matDatepicker]="pickerStart" formControlName="transactionStartDate">
                <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
                <mat-datepicker #pickerStart class="transaction-detail-header-label"></mat-datepicker>
            </mat-form-field>

#ts 代码

private modelForm(): FormGroup {
      transactionStartDate: [this.model.transactionStartDate || new Date()],
    });
  }

Answer 1

根据Angular Material可以使用自己的日期格式，可以导入NativeDateModule或者MomentDateModule（使用Moment.Js）。

例子：

在app.module.ts

//import needed modules
import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
import { MAT_DATE_FORMATS, DateAdapter} from '@angular/material-moment-adapter';


//create your own formats
export const DateFormats = {
    parse: {
        dateInput: ['D/M/YYYY'] //D = Days, M = Months, Y = Years. you can change the input format
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    }
};


//add it to your providers
..
providers: [
    ...,
    { provide: DateAdapter, useClass: MomentDateAdapter},
    { provide: MAT_DATE_FORMATS, useValue: DateFormats },
    ...
]

当然，您可以根据需要修改格式。以上代码未经测试！ 确保你有Moment.js formatting的基本知识