与 Angular Material 中的 “Datepicker” 的外观抗衡

这是关于在 Angular Material 中使用日期选择器的故事。
Angular 版本为 4.

Datepicker的文档如下：
https://material.angular.io/components/datepicker/overview

如果使用默认设置， 中显示的文本将是 M/d/yyyy 的格式。
而且星期的表示方法也不常见。
为了修改这个外观，我进行了调查。

首先，以默认状态开始。

<md-form-field>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
  <md-datepicker #picker></md-datepicker>
</md-form-field>

直接复制粘贴过来的，是一个像刚开始的那个普通可用的日期选择工具，但是中显示的文本格式是M/d/yyyy。

我想更改格式！有没有任何指定格式的方法呢？

指定地域设定

  import { Component, OnInit } from '@angular/core';
+ import { DateAdapter, NativeDateAdapter } from '@angular/material';

  @Component({
    selector: 'datepicker-example',
    templateUrl: './datepicker-example.component.html',
    styleUrls: ['./datepicker-example.component.css']
  })
  export class DatepickerExampleComponent implements OnInit {

-   constructor() {
+   constructor(dateAdapter: DateAdapter<NativeDateAdapter>) {
+     dateAdapter.setLocale('de-DE');
    }

    ngOnInit() {
    }
  }

我最初找到的是设置地区。
会变成像日本风格的日历吗？
那么我马上试试看。
当然是用 dateAdapter.setLocale(‘ja’);。

画面上的图像看起来是这样的。
它以 yyyy/M/d 的形式呈现，感觉很好。
星期的表示也很好，是 日 月 火…。
另外，Year 的表示从 SEP 2017 变成了 2017年9月，
Month 的表示从 SEP 变成了 9月，更符合日本风格。

不过，所有日期中都有一个”日”字…真是有点恶心。 （写作时我已经习惯了，所以感觉恶心的程度减少了一半…）

要想调整这些内容，可能需要覆写提供者。
https://material.angular.io/components/datepicker/overview#customizing-the-date-implementation
https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats
https://material.angular.io/components/datepicker/overview#localizing-labels-and-messages

暂且使用谷歌开发者工具

mat-calendar-body-cell-content 是什么？

寻找类似于日历的地方

在这里可以找到：https://github.com/angular/material2/blob/master/src/lib/datepicker/calendar-body.html#L42 。

看起来{{item.displayValue}}正在显示实际值。

如果继续这样下去… (If continuing like this…)

*ngFor=”let item of row;

item は row の要素

*ngFor=”let row of rows;

row は rows の要素

rows はHTML上から見つからなかったので ts 側で変数となっているはず

https://github.com/angular/material2/blob/master/src/lib/datepicker/calendar-body.ts#L52
ありました。 selector: ‘[mat-calendar-body]’ の @Input() rows: MatCalendarCell[][]; のようですね。

@Input() 这意味着肯定有人在某处进行了设置！

搜索mat-calendar-body的[rows]

我在 https://github.com/angular/material2/blob/master/src/lib/datepicker/month-view.html#L9 处。

下一次是 _weeks！
应该就在刚才的那个 ts 那边！

寻找 _weeks

在这里将值插入。

CHIBI: 第一天
CHIBI: 第二天
CHIBI: 第三天
CHIBI: 第四天
CHIBI: 第五天

听起来不错！把 dateNames[i] 换成随便一个字符串试试看…

这个…!!

dateNames是通过以下代码获取的。
https://github.com/angular/material2/blob/master/src/lib/datepicker/month-view.ts#L157

DateAdapter 的出现。
刚刚挥了一挥 Provider 重写的机会！
https://material.angular.io/components/datepicker/overview#customizing-the-date-implementation

供應商覆寫

  import { Component, OnInit } from '@angular/core';
  import { DateAdapter, NativeDateAdapter } from '@angular/material';

+ class MyDateAdapter extends NativeDateAdapter {
+   getDateNames(): string[] {
+     const dateNames: string[] = [];
+     for (let i = 0; i < 31; i++) {
+       dateNames[i] = String(i + 1);
+     }
+     return dateNames;
+   }
+ }

  @Component({
    selector: 'datepicker-example',
    templateUrl: './datepicker-example.component.html',
    styleUrls: ['./datepicker-example.component.css'],
+   providers: [
+     {provide: DateAdapter, useClass: MyDateAdapter}
+   ]
  })
  export class DatepickerExampleComponent implements OnInit {


    constructor(dateAdapter: DateAdapter<NativeDateAdapter>) {
      dateAdapter.setLocale('ja');
    }

    ngOnInit() {
    }
  }

请原谅我来晚了。我错过了很多有趣的对话。

最后是备忘录

在上面的 Stack Overflow 问题中，我看到了一些关于 MD_DATE_FORMATS 的修改和重写 NativeDateAdapter 中的 format() 方法的方法。尽管我没有完全理解，但我试了一下，结果并不理想，最终我选择了这种方法。

可能会用到，先留下链接。
特别是在需要用到 yyyy/MM/dd 格式时会很有用。