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

Question

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

根据这个问题并在文档中提到

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,

例如:今天日期是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:通过自定义日期atapter对解析和显示格式进行cusomising

在自定义日期适配器(您的是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 ？ sombed = 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

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

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要求时返回a MAT_DATE_FORMATS（请阅读此处以获取更多详细信息）。在您的自定义格式中，属性display.dateInput设置为DD/MM/YYYY。

Answer 4

在提供者部分下的 app.module.ts 文件上使用它，如下所示

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