MdDatepickerModule-欧洲格式 [英] MdDatepickerModule - European format

问题描述

我使用MdDatePickerModule来选择日期，但是我有一个问题: 如果我选择8月5日，则一切正常.但是，如果我重新打开选择，则月份会更改为5月，如果我选择5月3日，则会关闭并重新打开，月份为3月.现在我知道问题是，与欧洲相比，美国的月份和日期是相反的，但是解决冲突的聪明"方法是什么? 谢谢

I use MdDatePickerModule to pick dates but I have a problem: If I select August 5, everything is ok. But if I reopen the selection the month changes and becomes May, if I select May 3, I close, re-open, the month is March. Now I know that the problem is that in America the month and the day are inverted compared to Europe, but what is the "smart" way to resolve the conflict. thanks

推荐答案

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

The correct way of doing it for now is to set the locale as well as having a custom adapter to parse the date properly.

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

}

柱塞演示

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

This bug has been reported to Material team and being tracked by the following issue.

这篇关于MdDatepickerModule-欧洲格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！