Angular 如何更改角度材质日期选择器格式

这是我使用角度材质日期选择器时获得的日期格式。…

2018年11月21日星期三00:00:00 GMT+0530（印度标准时间）

但是我需要

（YYYY-MM-DD）

或

（YYYY-MM-DDTHH:MM）

这种格式的日期

这是一个模型类，我用它来从角度材质表单中捕获数据

export class FlightSchedule {

    constructor(
        public destination: string,
        public origin: string,
        public date: string,
        public limit: string
    ) {}

}

请帮助我，我无法将日期转换为

YYYY-MM-DD

或

yyy-MM-DDTHH:MM

格式

我是新手

---

提前感谢

您需要提供一个包含您希望使用的格式的对象。对象的外观应类似于：

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

然后需要将其添加到提供者数组中，如下所示：

  import { MAT_DATE_FORMATS } from '@angular/material';
  import { MomentDateAdapter } from '@angular/material-moment-adapter';

  //...

  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

---

在app.module中添加上述代码。它非常适合我。

无需使用

MomentDateAdapter

这是我的解决方案，代码量最少，使用

MAT\u NATIVE\u DATE\u格式

声明自己的日期格式

从'@angular/material'导入{MatDateFormats，MAT_NATIVE_DATE_FORMATS}；
导出常量格式日期格式：MatDateFormats={
…MAT_NATIVE_DATE_格式，
显示：{
…MAT_NATIVE_DATE_FORMATS.display，
日期输入：{
年份：'数字'，
月：“短”，
日期：'数字'，
}作为Intl.DateTimeFormations，
}
};

使用它们

@组件({
选择器：“应用程序假期向导”，
templateUrl:'./假期向导.component.html'，
样式URL:['./假期向导.component.scss']，
供应商：[
{提供：MAT_DATE_FORMATS，useValue:GRI_DATE_FORMATS}，
]
})

不要忘记设置适当的语言

构造函数（专用只读适配器：DateAdapter）{
this.adapter.setLocale（this.translate.currentLang）；

就这些

modelChanged（日期）{
var theDate=新日期（Date.parse（Date））；
const localDate=theDate.toLocalString（）.split（“”）；
log（localDate）；
}

选择一个日期

您要转换从

日期选取器收到的日期

或在

日期选取器内格式化日期

输入？我要转换从日期选取器收到的日期，谢谢您使用184994，但我无法在我的项目中自定义它。这是我的html datepicker格式，我现在附加它，为什么您无法自定义它？我相信我有class=“form control”，但在示例中它是[formControl]=“date”，所以我无法使用date=new formControl（矩（））；应用内组件您无法手动更改此解决方案中的日期。这是我的行为wired@MSM如何在运行时间上显示时间？如何在2021-04-26T00:00:00这样的运行时间上显示时间？也适用于手动日期更改！这个适配器是什么？@gyozokudor请不要只发布代码作为答案，还要解释代码的作用以及如何解决问题。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

 export const DateFormats = {
            parse: {
                dateInput: ['YYYY-MM-DD']
            },
            display: {
                dateInput: 'YYYY-MM-DD',
                monthYearLabel: 'MMM YYYY',
                dateA11yLabel: 'LL',
                monthYearA11yLabel: 'MMMM YYYY',
            },
        };

    providers: [

        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
          { provide: MAT_DATE_FORMATS, useValue: DateFormats }

      ],