Angular Material中的mat-date-picker

Angular Material是一个UI组件库，由Angular团队开发，用于构建桌面和移动Web应用程序的设计组件。为了安装它，我们需要在我们的项目中安装Angular，一旦你有了它，你可以输入下面的命令并可以下载它。

安装:

ng add @angular/material

步骤:

首先，使用上述命令安装Angular Material。
完成安装后，在app.module.ts文件中从’@angular/material’导入’MatDatepickerModule,’。
然后使用标签来使用angular material date picker以及matInput。
我们也可以禁用日期选择器的弹出功能，手动输入日期。有不同颜色的主题可供选择。
为了改变主题，我们需要传递一个颜色属性。下面我使用了一个重点主题和默认主题来给出一个更广泛的观点。
一旦完成了上述步骤，就可以服务或开始项目。

代码实现:

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from 
    '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { MatButtonModule } from 
    '@angular/material/button';
import { MatButtonToggleModule } from 
    '@angular/material/button-toggle';
import { MatDatepickerModule } from 
    '@angular/material/datepicker';
import { MatInputModule } from 
    '@angular/material/input';
import { MatFormFieldModule } from 
    '@angular/material/form-field';
import { MatNativeDateModule } from 
    '@angular/material/core';
  
@NgModule({
    imports: [BrowserModule,
        FormsModule,
        BrowserAnimationsModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatDatepickerModule,
        MatInputModule,
        MatFormFieldModule,
        MatNativeDateModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker1">
    <mat-datepicker-toggle matSuffix [for]="picker1">
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<br>
  
<mat-form-field color="accent" appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker2">
    <mat-datepicker-toggle matSuffix [for]="picker2">
    </mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<br>
  
<mat-form-field appearance="fill">
    <mat-label>Completely disabled</mat-label>
    <input matInput [matDatepicker]="picker3" disabled>
    <mat-datepicker-toggle matSuffix [for]="picker3">
    </mat-datepicker-toggle>
    <mat-datepicker #picker3></mat-datepicker>
</mat-form-field>
<br>
  
<mat-form-field appearance="fill">
    <mat-label>Popup disabled</mat-label>
    <input matInput [matDatepicker]="picker4">
    <mat-datepicker-toggle matSuffix [for]="picker4" 
        disabled>
    </mat-datepicker-toggle>
    <mat-datepicker #picker4></mat-datepicker>
</mat-form-field>

输出: