angular - 动态更改 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;
}
}
然后您在构造函数中注入适配器并更改“格式”值
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);
}
推荐阅读
- android - 如何使轮播滑块的中心比其他滑块大?
- javascript - 使用本地存储记住上次单击的按钮
- gdi - 表格的一部分要透明
- typescript - 如何在validationif装饰器nestjs class-validator中使用else条件?
- c++ - 没有识别从标头调用到主 C++ 的方法?
- r - 从 Eurostat 下载多个变量的数据
- haskell - 如何在haskell中处理SIGWINCH?
- django - 由于 ckeditor 形式,汉堡包超出了移动宽度。该怎么办?
- java - 无法使用 MySQL 数据库在 Spring Boot JPA 应用程序中运行实体类
- wordpress - WP Rest API:返回用户创建的帖子