物料日期和时间选择器– ngx-mat-datetime-picker

物料日期和时间选择器– ngx-mat-datetime-picker
发布时间 2020年4月12日
插件作者 h2qutc

一个Angular模块,用于创建受Material Design启发的日期和时间选择器。

如何使用它:

1.安装ngx-mat-datetime-picker。

# NPM
$ npm install ngx-mat-datetime-picker --save

2.导入ngx-mat-datetime-picker组件。

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from 'ngx-mat-datetime-picker';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      HttpClientModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      NgxMatDatetimePickerModule,
      NgxMatTimepickerModule,
      FormsModule,
      ReactiveFormsModule,
      MatButtonModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

3.将组件插入项目。

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

4.将组件插入项目。

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