Angular datetimepicker ngx-mat-datetime-picker

簡介

在 Angular 專案加入 datetimepicker

步驟

1. 安裝 @angular/material

   ng add @angular/material
   

2. 安裝 datetimepicker

   npm install --save @angular-material-components/datetime-picker
   

3. 修改 app.module.ts

   import {
   NgxMatDatetimePickerModule,
   NgxMatNativeDateModule,
   NgxMatTimepickerModule,
   } from '@angular-material-components/datetime-picker';
   
   import { MatDatepickerModule } from '@angular/material/datepicker';
   import { MatFormFieldModule } from '@angular/material/form-field';
   import { MatInputModule } from '@angular/material/input';
   @NgModule({
   declarations: [AppComponent],
   imports: [
    NgxMatDatetimePickerModule,
    NgxMatNativeDateModule,
    NgxMatTimepickerModule,
   
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
   ],  
   
   })
   

4. 修改 app.component.html

   <mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" />
    <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker> </ngx-mat-datetime-picker>
   </mat-form-field>