角度材料2，更改datepicker日期格式“MM / DD / YYYY”到“DD / MM / YYYY”奇怪的行为

Question

我只是尝试将角度素材2日期选择器默认日期格式 MM / DD / YYYY 更改为 DD / MM / YYYY 或 DD.MM .YYYY 或至少 DD-MM-YYYY

根据this question和the documentation

中提到的内容

  

providers: [{provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]

所以尝试了以下方法

方法1 plunkr：进入 DD-MM-YYYY 格式

方法2 plunkr：进入 DD.MM.YYYY 格式

方法3 plunkr：进入 DD / MM / YYYY 格式

但上面的每个方法都是普通的，直到我选择日期 1到12，

ex：今天日期 2017年9月25日，如果我选择 2017年9月12日作为日期，那么再次点击datepicker按钮我可以看到日历日期，视为2017年11月9日（09/11/2017）不是（11/09/2017），这似乎是默认日期格式没有正确覆盖

Answer 1

在app.module.ts数组下的providers:中使用此功能。

{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}

Answer 2

1 / DOCS：By cusomising the parse and display format with a custom date atapter

在自定义日期适配器（您的是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);
  }

工作stackblitz：https://stackblitz.com/edit/angular-material-datepicker-format?embed=1&file=app/date.adapter.ts

您的完整日期适配器：

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的格式，并且可以使用如下日历：

Answer 3

一种可能的解决方案是简单地定义自己的输入格式：

category.sneakers.title

以下代码告诉注入器在有人要求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 } 时返回DD_MM_YYYY_Format（有关更多详细信息，请阅读here）。在您的自定义格式中，属性MAT_DATE_FORMATS设置为display.dateInput。

Answer 4

Fetrarij的更新版本，日期格式为dd.mm.yyyy，第一天为星期一：

• 在app.module.ts中：

 
    { provide: MAT_DATE_LOCALE, useValue: 'sk-SK' },

• 日期适配器扩展名：

 

    @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);
        }

    }

为我工作。角度6。

Answer 5

在模块提供商的部分使用它

{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}