Angular 角度材质2，更改日期选择器日期格式；年月日；至；年月日；奇怪的行为

我刚刚尝试将angular material 2日期选择器默认日期格式MM/DD/YYYY更改为DD/MM/YYYY或DD.MM.YYYY或至少DD-MM-YYYY

根据和如中所述

providers:[{提供：MD\u DATE\u格式，使用值：MY\u NATIVE\u DATE\u格式}]

因此，我们尝试了以下方法

方法：采用DD-MM-YYYY格式

方法：采用DD.MM.YYYY格式

方法：采用DD/MM/YYYY格式

但在我选择日期之前，上述每种方法都可以正常工作

例如：今天的日期是2017年9月25日，如果我选择2017年9月12日作为日期，然后再次单击datepicker按钮，我可以看到日历日期，取2017年11月9日（2017年11月9日）而不是（2017年9月11日），这似乎是默认日期格式没有正确覆盖的日期

在自定义日期适配器（您的是AppDateAdapter）中，添加解析方法以将新的日期格式（DD/MM/YYY）解析为日期有效日期：

例如，对于DD/MM/YYYY格式，解析可以是：

   parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

工作人员突击检查：

您的完整日期适配器：

export class AppDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
        if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
          const str = value.split('/');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
        }
        const timestamp = typeof value === 'number' ? value : Date.parse(value);
        return isNaN(timestamp) ? null : new Date(timestamp);
      }
   format(date: Date, displayFormat: any): string {
       if (displayFormat == "input") {
           let day = date.getDate();
           let month = date.getMonth() + 1;
           let year = date.getFullYear();
           return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
       } else {
           return date.toDateString();
       }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   } 
}

这种方法的优点是，您还可以在显示常量中自定义

monthYearLabel

的格式，并且可以有如下日历：

---

在

提供者：

数组下的

app.module.ts

中使用此选项

---

{provide:MAT\u DATE\u LOCALE，useValue:'en GB'}

一个可能的解决方案就是定义自己的输入格式：

export const DD_MM_YYYY_Format = {
    parse: {
        dateInput: 'LL',
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [
        {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format},
    ]
})
export class AppComponent implemets OnInit {
   // ... some code
}

---

以下代码告诉喷油器，当有人要求使用

MAT\u DATE\u格式时，返回
DD\u MM\u YYYY\u格式
（阅读了解更多详细信息）。在自定义格式中，属性
display.dateInput
设置为
DD/MM/YYYY
更新版本的Fetrarij，适用于日期格式DD.MM.YYYY（第一天星期一）：


在app.module.ts中：


日期适配器扩展名：

为我工作。Angular 6.
在提供商部分下的app.module.ts文件中使用它，如下所示

 providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'}
  ], 

谢谢，但将此更改为2017/06/28确实会导致奇怪的情况。@Fetra R.好吧，让我们这样说：我只更改了这一行并返回此。_to2数字（日）+'/'+此。_to2数字（月）+'/'+年；到年+'/'+这个数字（天）+'/'+这个数字（月）；这还不够吗？你刚才添加的这个确实有效！非常感谢。如果输入是数字，这会中断…在format方法中添加“displayFormat”来保存所选格式是否不好？如果“displayFormat”实际上是一个字符串，为什么“displayFormat”应该是一个对象？这是他在开始时尝试的，它的行为非常奇怪！我也有同样的问题，我以前只使用“nl”。使用“nl nl”它可以正常工作。是的，这确实可以工作，但您需要导入到app.module，以及从“@angular/material”导入{MAT_DATE_LOCALE}；伟大的可能是最简单的方法…感谢分享它将有助于更改显示值而不是实际日期值。我得到的日期值是这样的格式“Fri Oct 30 2020 00:00:00 GMT+0600（孟加拉国标准时间）”我只在代码app.module.ts{provider}中解决了一部分问题。我喜欢这个解决方案，正是我所寻找的！幸运的是，我只关心显示器，“en GB”也能工作！


    @Injectable()
    export class DateAdapterSK extends NativeDateAdapter {

        getFirstDayOfWeek(): number {
            return 1;
        }

        parse(value: any): Date | null {
            if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
                const str = value.split('.');
                const year = Number(str[2]);
                const month = Number(str[1]) - 1;
                const date = Number(str[0]);
                return new Date(year, month, date);
            }
            const timestamp = typeof value === 'number' ? value : Date.parse(value);
            return isNaN(timestamp) ? null : new Date(timestamp);
        }

    }


 providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'}
  ],