Material Datepicker自定义日期格式

前言

在企业级开发中，我们经常会使用到日期控件。在以前的jquery框架项目中，我们通常会选择mydate 97。现在我们使用Angular框架，Material官网也为我们提供了Datepicker组件。对于日期的显示的格式，有很多种，比如下面的：

• 2019/07/11
• 2019-07-11
• 等...

面对这种需求，就需要我们可以自定义Datepicker的显示格式。

自定义日期格式

官网为我们提供了一个自定义格式的范例：

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment} from 'moment';

const moment = _rollupMoment || _moment;

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Datepicker with custom formats */
@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerFormatsExample {
  date = new FormControl(moment());
}

效果如下：

在这个官方范例中，使用到了moment这个库，因此我们在npm包管理中加入moment依赖。

接下来我们分析这个例子。

可以看看到在TypeScript文件中，定义了个MY_FORMATS的常量：

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',  // 表示input中输入的格式，moment将按此格式解析内容
  },
  display: {
    dateInput: 'LL',  // 显示格式，monent将日期按此格式呈现给用户
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

通过使用Providers，将MY_FORMATS注册成服务，这样Angular就可以通过DI将MAT_DATE_FORMATS注入给Datepicker组件了。

那么像我们上面提到的2019-07-11该如何自定义呢？

要实现这个格式还是比较简单的，我们只需要修改MY_FORMATS，其他的内容不需要动，就可以实现我们想要的效果：

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',  // 表示input中输入的格式，moment将按此格式解析内容
  },
  display: {
    dateInput: 'YYYY-MM-DD',  // 显示格式，monent将日期按此格式呈现给用户
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

运行效果如下：

需要注意的是，我们要确保parse>dateInput和diplay>dateInput的格式保持一致。

总结

Material Datepicker目前还没有支持像mydate 97那样强大。如果需要在同一个表单中，多个input显示不同的日期格式，就需要使用Angular的组件化特性，把每一种格式的日期封装成一个独立的组件，每个组件使用自己的Provider，这样就可以在同一个表单中使用多个自定义组件，实现不同日期格式的需求。