动态更改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'
}
}

}

然后在provider中使用这个类

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

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

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

在构造函数中注入适配器并改变格式值

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

Answer 2

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

请检查这个示例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可以动态改变