Angular 2 Material 2日期选择器日期格式

Question

我需要帮助。我不知道如何更改材料 2 日期选择器的日期格式。我已经阅读了文档，但我不明白我实际需要做什么。 datepicker默认提供的输出日期格式为fe: 6/9/2017

我想要实现的是将格式更改为 9-Jun-2017 或任何其他格式。

文档 https://material.angular.io/components/component/datepicker 对我一点帮助都没有。提前致谢

原文由 Igor Janković 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我为此找到的唯一解决方案：

首先，创建常量：

 const MY_DATE_FORMATS = {
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       // dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
       dateInput: 'input',
       monthYearLabel: {year: 'numeric', month: 'short'},
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};

然后你必须扩展 NativeDateADapter：

 export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): 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);
   }
}

在格式功能中，您可以选择您想要的任何格式

最后一步，您必须将其添加到模块提供程序中：

 providers: [
    {provide: DateAdapter, useClass: MyDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS},
],

就是这样。我无法相信没有一些简单的方法可以通过 @Input 更改日期格式，但我们希望它将在材料 2（当前为 beta 6 ）的某个未来版本中实现。

原文由 Igor Janković 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Igor 的回答对我不起作用，所以我直接在 Angular 2 Material 的 github 上询问，有人给了我对我有用的答案：

1. 首先编写自己的适配器：

    import { NativeDateAdapter } from "@angular/material";


   export class AppDateAdapter extends NativeDateAdapter {

       format(date: Date, displayFormat: Object): string {

           if (displayFormat === 'input') {

               const day = date.getDate();
               const month = date.getMonth() + 1;
               const year = date.getFullYear();

               return `${day}-${month}-${year}`;
           }

           return date.toDateString();
       }
   }

1. 创建您的日期格式：

    export const APP_DATE_FORMATS =
   {
       parse: {
           dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
       },
       display: {
           dateInput: 'input',
           monthYearLabel: { year: 'numeric', month: 'numeric' },
           dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
           monthYearA11yLabel: { year: 'numeric', month: 'long' },
       }
   };

1. 将这两个提供给您的模块

   providers: [
           {
               provide: DateAdapter, useClass: AppDateAdapter
           },
           {
               provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
           }
       ]

更多信息 在这里

编辑： 对于那些遇到格式不尊重手动输入问题的人，您可以覆盖 parse(value: any) 来自 NativeDateAdapter 的函数，如下所示。

 parse(value: any): Date | null {
    const date = moment(value, 'DD/MM/YYYY');
    return date.isValid() ? date.toDate() : null;
}

因此，自定义适配器将采用如下最终形状。

 import { NativeDateAdapter } from "@angular/material";
import * as moment from 'moment';

export class AppDateAdapter extends NativeDateAdapter {

    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {

            const day = date.getDate();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();

            return `${day}/${month}/${year}`;
        }

        return date.toDateString();
    }

    parse(value: any): Date | null {
        const date = moment(value, environment.APP_DATE_FORMAT);
        return date.isValid() ? date.toDate() : null;
    }
}

原文由 Robouste 发布，翻译遵循 CC BY-SA 4.0 许可协议