MdDatepickerModule - 欧洲格式答案

【问题标题】：MdDatepickerModule - European formatMdDatepickerModule - 欧洲格式
【发布时间】：2018-01-13 11:11:12
【问题描述】：

我使用 MdDatePickerModule 来选择日期，但我遇到了一个问题：如果我选择 8 月 5 日，一切正常。但是如果我重新打开选择，月份会改变并变成五月，如果我选择五月 3 日，我关闭，重新打开，月份是三月。现在我知道问题是在美国，与欧洲相比，月份和日期是倒置的，但解决冲突的“聪明”方法是什么。谢谢

【问题讨论】：

标签： angular datepicker angular-material2

【解决方案1】：

目前正确的做法是设置语言环境以及使用自定义适配器来正确解析日期。

ts：

import {Component} from '@angular/core';
import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material";

export class ItalianDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }
      return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: './datepicker-overview-example.html',
  styleUrls: ['./datepicker-overview-example.css'],
  providers: [{provide: DateAdapter, useClass: ItalianDateAdapter}],
})
export class DatepickerOverviewExample {

  locale: string;

  constructor(private dateAdapter: DateAdapter<Date>) {
    this.locale = 'it';
    this.dateAdapter.setLocale('it');   
  }

}

Plunker demo

此错误已报告给 Material 团队，并由以下issue 跟踪。

【讨论】：

感谢您的回答，（尝试了 'en-gb' 和 'it'）但我的代码和您的 plunker 都有同样的问题。
你可以分叉，重新创建你的问题，并分享链接吗？
我对你的 plunker 也有同样的问题。如果我选择12以下的一天，在下次重新打开日期选择时，月份会根据所选日期更改：我选择今天8月5日，我再次选择月份为2017年5月，我选择5月4日，再次打开选择另一个日期和月份是 2017 年 4 月，依此类推。如果我选择 13 或超过一个月，它会回到 8 月。我是意大利人，这里是 dd / mm / yyyy。我不会为您的 plunker 更改逗号，而且我总是遇到同样的问题。
哦，我现在看到了问题所在。我正在努力，谢谢！
@AntoninoMirabile，尝试更新的答案。很抱歉在发布之前没有验证之前的答案。

【解决方案2】：

我正在努力解决类似的问题。在我的应用程序中，我想同时使用“en”和“pl”日期格式。我所做的只是在 parse 方法中添加第二个 if() 。所以我的适配器现在看起来像这样：

export class MyDateAdapter extends NativeDateAdapter {


  // change first day of the week to Monday(1)
  getFirstDayOfWeek(): number {
    return 1;
  }

  parse(value: any): Date | null {

    // english format
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }
      return new Date(Number(str[2]), Number(str[0]) - 1, Number(str[1]), 12);
    }

    // polish format
    if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
      const str = value.split('.');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }

      return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
    }

    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

 }

【讨论】：