MdDatepickerModule - 欧洲格式

Question

我使用 MdDatePickerModule 来选择日期，但我遇到了问题：如果我select8月5日，一切都ok。但是，如果我重新打开 selection，月份将变为 5 月，如果我 select 5 月 3 日关闭，重新打开，则月份为 3 月。现在我知道问题是在美国的月份和日期与欧洲相比是倒置的，但是"smart"解决冲突的方法是什么。谢谢

Answer 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.

团队跟踪

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

 }

MdDatepickerModule - 欧洲格式

MdDatepickerModule - European format

datepicker

angular-material2

angular