我想在 Angular Material 日期选择器上将我的日期值仅显示为日期(“yyyy-MM-dd”)。目前,默认日期值是 ISO 格式(包括时间)。
我有一个启动器 Stackblitz具有所需设置的项目。 formly-datepicker.type
是我想集中转换的地方,以便模型中使用的任何日期都将针对服务层正确格式化。
我以集中方式完成它的尝试之一是使用 Angular ControlValueAccessor,但该值永远不会更新。 ControlValueAccessor Stackblitz
在 Stackblitz 示例中,更改日期并单击提交 后,我需要返回的值类似于:{"mydate":"1940-03-11"}
(没有时间信息)。
最佳答案
所以,我想我有解决方案可以让您将 mat datepicker
显示为 ("yyyy-MM-dd")
格式。为此,请安装依赖项 "@angular/material-moment-adapter": "^11.1.2"
和 "moment": "^2.18.1"
(两者是当前版本)。然后在您的 formly-datepicker-type.component.ts
文件中导入这 2 个库。
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
然后在您的 formly-datepicker-type.component.ts
文件中添加如下所示的日期格式。=>
export const MY_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY',
},
};
之后通过添加像下面这样的提供程序来更新 @Component
=>
@Component({
selector: "app-formly-datepicker-type",
templateUrl: "./formly-datepicker-type.component.html",
styleUrls: ["./formly-datepicker-type.component.css"],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
]
})
最后,日期时间将按需要显示。
注意:我已经为您更新了 stackblitz 的示例代码。请检查我的演示链接 => Stackblitz mat-datepicker Date-Time Format .
关于angular - 如何在服务层的 Formly 表单内格式化 Angular Material 日期选择器(不是显示格式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66072525/