Question

我在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'”无效

Answer 1

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

您还可以使用区域设置在Datepicker中获取不同的格式。但这只是一个解决方法，直到正确的官方解决方案出现：

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

Answer 2

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

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

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

angular2材质2 Datepicker - 输出日期格式

2 个答案: