角度材料中的日期时间选择器 - TypeScript

简介

Angular Material 提供了一个日期时间选择器组件，它是一个 Angular 组件，需要在 Angular 应用中引入 MatDatetimepickerModule 模块。日期时间选择器可以以三种方式使用：单独的日期、时间或日期和时间选择器。

安装

首先，将 Angular Material 添加到应用中。可以在 app.module.ts 文件中进行安装：

import { MatDatetimepickerModule } from "@mat-datetimepicker/core";
import { MatMomentDatetimeModule } from "@mat-datetimepicker/moment";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatDatetimepickerModule,
    MatMomentDatetimeModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

导入后就可以在 HTML 模板中使用选择器了。

使用

单独日期选择器

使用日期选择器需要在模板中添加日期输入框：

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

可以很方便地将日期时间选择器与 Angular FormBuilder 一起使用，以便将日期数据与表单数据绑定起来：

import { Component } from "@angular/core";
import { FormBuilder } from "@angular/forms";

@Component({
  selector: "app-root",
  template: `
    <form [formGroup]="myForm">
      <mat-form-field>
        <input matInput formControlName="date" [matDatetimepicker]="picker" placeholder="Choose a date" />
        <mat-datetimepicker-toggle matSuffix [for]="picker"></mat-datetimepicker-toggle>
        <mat-datetimepicker #picker></mat-datetimepicker>
      </mat-form-field>
    </form>
  `,
})
export class AppComponent {
  myForm = this.fb.group({
    date: [null],
  });

  constructor(private fb: FormBuilder) {}
}

单独时间选择器

使用单独的时间选择器需要在模板中添加时间输入框：

<mat-form-field>
  <input matInput [matDatetimepicker]="picker" placeholder="Choose a time" />
  <mat-datetimepicker-toggle matSuffix [for]="picker"></mat-datetimepicker-toggle>
  <mat-datetimepicker #picker></mat-datetimepicker>
</mat-form-field>

可以将时间选择器与时间格式器一起使用，以便将时间转换为所需的格式：

import { Component } from "@angular/core";
import { Time } from "@angular/common";
import { FormControl } from "@angular/forms";
import { Moment } from "moment";

@Component({
  selector: "app-root",
  template: `
    <mat-form-field>
      <input matInput [matDatetimepicker]="picker" placeholder="Choose a time" [formControl]="myTime" />
      <mat-datetimepicker-toggle matSuffix [for]="picker"></mat-datetimepicker-toggle>
      <mat-datetimepicker [format]="timeFormat" #picker></mat-datetimepicker>
    </mat-form-field>
  `,
})
export class AppComponent {
  myTime = new FormControl();

  timeFormat = "HH:mm";

  constructor() {}
}

日期和时间选择器

日期和时间选择器需要在模板中添加日期和时间输入框：

<mat-form-field>
  <input matInput [matDatetimepicker]="picker" placeholder="Choose a date and time" />
  <mat-datetimepicker-toggle matSuffix [for]="picker"></mat-datetimepicker-toggle>
  <mat-datetimepicker #picker></mat-datetimepicker>
</mat-form-field>

可以将日期时间选择器与日期和时间格式器一起使用，以便将日期和时间转换为所需的格式：

import { Component } from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { Moment } from "moment";

@Component({
  selector: "app-root",
  template: `
    <form [formGroup]="myForm">
      <mat-form-field>
        <input matInput formControlName="datetime" [matDatetimepicker]="picker" placeholder="Choose a date and time" />
        <mat-datetimepicker-toggle matSuffix [for]="picker"></mat-datetimepicker-toggle>
        <mat-datetimepicker [dateAdapter]="adapter" [format]="dateTimeFormat" #picker></mat-datetimepicker>
      </mat-form-field>
    </form>
  `,
})
export class AppComponent {
  myForm = this.fb.group({
    datetime: [null],
  });

  dateTimeFormat = "YYYY-MM-DD HH:mm";

  constructor(private fb: FormBuilder) {}

  adapter = {
    parse: (value: any, format: string): Moment => {
      return moment(value, format);
    },
    format: (value: Moment | any, format: string): string => {
      if (!value) {
        return "";
      }
      return value.format(format);
    },
    createDate: (year: number, month: number, date: number): Moment => {
      return moment({ year, month, date });
    },
    today: () => {
      return moment();
    },
    clone: (date: Moment): Moment => {
      return moment(date);
    },
  };
}

总结

日期时间选择器是 Angular Material 中一个强大的 UI 组件，能够轻松地帮助应用程序轻松地处理日期和时间。无论是单独的日期选择器、时间选择器还是日期和时间选择器，都可以使用 Angular FormBuilder 轻松绑定到表单上。