3

我想在 Angular Material 日期选择器上将我的日期值公开为仅日期（“yyyy-MM-dd”）。目前，默认日期值是 ISO 格式（包括时间）。

我有一个具有所需设置的 Starter Stackblitz项目。这formly-datepicker.type是我想集中转换的地方，以便模型中使用的任何日期都可以为服务层正确格式化。

我以集中方式完成它的尝试之一是使用 Angular ControlValueAccessor，但该值永远不会更新。ControlValueAccessor Stackblitz

在 Stackblitz 示例中，更改日期并单击提交后，我需要返回的值类似于：（{"mydate":"1940-03-11"}没有时间信息）。

4

1 回答 1

0

所以，我想我有解决方案让你显示mat datepicker为("yyyy-MM-dd")格式。为此安装到依赖项"@angular/material-moment-adapter": "^11.1.2"和"moment": "^2.18.1"（都是当前版本）。然后在您的文件中导入formly-datepicker-type.component.ts这两个库。

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。

于 2021-02-06T08:54:01.963 回答