angular2 Material 2 Datepicker - 输出日期格式答案

【问题标题】：angular2 Material 2 Datepicker - Output Date Formatsangular2 Material 2 Datepicker - 输出日期格式
【发布时间】：2017-05-29 08:41:49
【问题描述】：

我在我的 angular4 项目中使用 https://material.angular.io/components/component/datepicker。如何使用“2017 年 5 月 29 日”等短格式在输入框中格式化所选日期。目前显示为 29/05/2017

示例代码：

<md-input-container>
  <input mdInput readonly="true" [mdDatepicker]="startDatePicker" [mdDatepickerFilter]="myFilter" [min]="minDate" [max]="maxDate" class="date-text ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="startDatePicker" class="date-icon"></button>
</md-input-container>

<md-datepicker #startDatePicker [dateFormat]="'LL'" startView="month" [startAt]="currentDate"></md-datepicker>

TS：

@ViewChild('startDatePicker') startDatePicker: MdDatepicker<Date>;

PS。 [dateFormat]="'LL'" 不起作用

【问题讨论】：

请张贴您的代码。您发布的链接中有一个部分用于日期格式。
已更新 :) 谢谢
你能发布解决方案吗？
我还没有找到任何解决方案。 :(

标签： angular angular-material

【解决方案1】：

您目前无法轻松设置日期格式。 Material 2 Datepicker API 中没有这样的属性，更改格式的唯一正确方法是提供您自己的 DateAdapter 实现。官方文档没有提供任何相关说明。目前只有一个基本的implementetion 根据locale 定义格式。对此有很多抱怨，很快就会有更多的适配器出现。您可以尝试使用来自 this issue-thread 的基于 moment.js 的一个，或者只是等待。

您还可以使用语言环境在 Datepicker 中获取不同的格式。但这只是一种解决方法，直到出现适当的官方解决方案：

export class AppModule {
  constructor(private dateAdapter:DateAdapter<Date>) {
    dateAdapter.setLocale('de'); // DD.MM.YYYY
  }
}

【讨论】：

感谢您的回答。我会尝试玩这个适配器
请问，我们在哪里可以获得像“de”这样的位置 ID？
@Einsamer，您的意思是list 的可用语言环境吗？
是的。我认为他们应该在某处使用switch-case
这行得通，但我试图将它添加到应用程序模块中，但它没有工作（我在子模块中使用日期选择器）......这很烦人......

【解决方案2】：

我宁愿为此使用模块提供程序：

@NgModule({
...
providers: [
     { provide: LOCALE_ID, useValue: navigator.language }
     ...
  ]
})
export class AppModule { }

或者您可以将 navigator.language 替换为 'de' 以达到与上述相同的效果。

【讨论】：