角日期选择-动态更新MAT_DATE_FORMATS
我正在一个Angular9应用程序上工作，这个应用程序可以处理日期。它显示和更新几个<mat-datepicker>字段。
我使用的是自定义MAT_DATE_FORMATS和MomentDateAdapter (@angular/material-moment-adapter)，来自https://www.npmjs.com/package/@angular/material-moment-adapter。
我使用了以下代码，运行良好：
export const APP_MOMENT_DATE_FORMATS =
{
parse: {},
display: {
dateInput: 'YYYY/MM/DD/MM',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
};
//..
providers: [
{
provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
},
{
provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]
}
]
// ..Stackblitz演示：https://stackblitz.com/edit/angular-formatted-datepicker-vdtaqj?file=app%2Fdatepicker-overview-example.ts
现在，我想知道是否可以更新APP_MOMENT_DATE_FORMATS.display.dateInput 动态的值-例如:也许它将通过http请求从配置服务中设置，或者我将在接口中显示一个选择器。
示例：
export const APP_MOMENT_DATE_FORMATS =
{
// ..
display: {
dateInput: this.appService.dateInputFormat,
// ..
}
};我知道我可以实现一个定制的日期适配器，如下所述：角2材料2数据采集数据格式。
但我想知道是否有另一种方法可以这样做，而不需要实现新的自定义日期适配器。
谢谢。
回答 2
Stack Overflow用户
发布于 2021-10-13 15:20:22
在花了几个小时寻找解决方案之后，我提出了以下解决方案，只需简单地注入MAT_DATE_FORMATS并动态地更改它：
const APP_MOMENT_DATE_FORMATS =
{
parse: {
dateInput: 'MM/DD/YYYY',
},
display: {
dateInput: 'MM/DD/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
};
@Component({
...
providers: [
{
provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
},
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE]
}
]
})
export class DatePickerComponent implements OnInit, OnDestroy {
constructor(@Inject(MAT_DATE_FORMATS) public data: any) {
data.parse.dateInput = 'DD/MM/YYYY'
data.display.dateInput = 'DD/MM/YYYY'
}
}Stack Overflow用户
发布于 2021-08-09 02:26:21
不太确定如何在运行时更新提供程序的值，但有办法在组件级别为mat-datepicker提供不同的mat-datepicker值。
正如角舵中提到的
同一元素上的组件和指令共享一个注入器。
将customPickerFormats指令与不同的MAT_DATE_FORMATS提供程序放在包装mat-datepicker的mat-form-field中。
在directice.ts中：
import { Directive } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';
@Directive({
selector: '[appCustomPickerFormats]',
providers: [
{
provide: MAT_DATE_FORMATS,
useValue: {
parse: {
dateInput: 'DD/MM',
},
display: {
dateInput: 'Do MMMM',
monthYearLabel: 'MMM',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
},
},
],
})
export class CustomPickerFormatsDirective {}在component.ts中：
<mat-form-field appCustomPickerFormats>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="customPicker">
<mat-datepicker-toggle matSuffix [for]="customPicker"></mat-datepicker-toggle>
<mat-datepicker #customPicker></mat-datepicker>
</mat-form-field>默认情况下，不带指令的第一个mat-datepicker将使用为HostComponent或组件放置的模块设置的任何MAT_DATE_FORMATS值。
一个工作的堆栈闪电战示例这里。
https://stackoverflow.com/questions/61364618
复制相似问题
腾讯云开发者
