Angular Material 7 – 日期选择器(DatePicker)

Angular Material 是一个为 Angular 应用程序提供 UI 组件的库，使用 Material Design 的设计语言。其中的 DatePicker 组件能够帮助我们快速创建一个日期选择器，从而提供更优秀的用户体验。

安装

使用以下命令来安装 Angular Material：

npm install --save @angular/material@7.2.2

同时，我们还需要安装 HammerJS 以实现触摸屏支持：

npm install --save hammerjs

接着我们在 app.module.ts 文件中导入和添加 MatDatepickerModule 和 MatNativeDateModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

接下来，我们就可以使用 DatePicker 组件了。

使用

在 HTML 中添加以下代码：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

让我们来解释一下上面的代码：

mat-form-field：Material Design 风格的表单。
input matInput：文本输入框的样式。
[matDatepicker]="picker" ：将 datepicker 绑定到输入框。
mat-datepicker-toggle ：向 datepicker 隐藏和显示输入框。
[for]="picker" ：将该按钮绑定到 datepicker。
mat-datepicker ：日期选择器。

接下来，我们需要为应用选择一个主题。在应用中添加以下代码：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

现在，我们就可以在应用中通过拖动日期来选择日期了。

格式化日期

我们可以使用 MatDateFormats 对象来格式化日期。在 app.module.ts 文件中声明:

import { MatNativeDateModule, MAT_DATE_LOCALE, MatDatepickerModule, MAT_DATE_FORMATS } from '@angular/material';

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatNativeDateModule,
    MatDatepickerModule
  ],
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里我们定义了一个对象 MY_FORMATS 用于格式化日期，其中 dateInput 是输入的日期格式，其他属性是用户界面显示的内容。

例如，我们想要使用格式 YYYY-MM-DD ，就像这样：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" (dateChange)="changeDate($event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

接下来，我们在 TypeScript 文件中配置日期：

import { Component } from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  changeDate(event: MatDatepickerInputEvent<Date>) {
    let date = event.value;
    let month = date.getMonth() + 1; // 月份是从 0 开始计数的。
    let day = date.getDate();
    letlet year = date.getFullYear();
    console.log(` ${year}-$ {month}-${day}`);
  }
}

在该代码段中，当我们修改日期时，该方法将在控制台中输出格式为 YYYY-MM-DD 的日期。

更改语言和地区

MAT_DATE_LOCALE 是一个导入自 @angular/material 的注射器令牌，它允许我们使用不同的本地化规则和语言。

我们可以在 app.module.ts 中添加 MAT_DATE_LOCALE：

providers: [
  {provide: MAT_DATE_LOCALE, useValue: 'en-GB'}
]

在这里，我们使用了 en-GB 语言，也就是英国地区的日期格式。

但是，如果我们想使用不同的语言和地区，该怎么办呢? 我们需要先安装 @angular/common 模块：

npm install --save @angular/common

然后我们可以在 app.module.ts 文件中导入 registerLocaleData 和 localeZhHans：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import localeZhHans from '@angular/common/locales/zh-Hans';

import { AppComponent } from './app.component';

import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

registerLocaleData(localeZhHans);

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{ provide: MAT_DATE_LOCALE, useValue: 'zh-Hans' }]
})
export class AppModule { }

在这里，我们首先导入了 registerLocaleData 和 localeZhHans，然后将 localeZhHans 传递给 registerLocaleData 进行注册，并设置 MAT_DATE_LOCALE 的值为 'zh-Hans'。

现在，我们就可以使用中国大陆的语言和地区格式了。

结论

在本教程中，我们介绍了如何使用 Angular Material 7 创建一个日期选择器并探讨了如何格式化和本地化日期。如果您想进一步的学习 Angular Material 的其他 UI 组件，您可以访问官方文档：https://material.angular.io/components/categories。

完整的源代码可在以下代码仓库中获得：https://github.com/handsomeye/angular-material-7-datepicker。