角材料 日期选择器,取出@angular/材料 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x

说明

像 @angular/ material 这样的日期选择器 摘取日期者 为选择时间添加支持.

德莫尔

@ 见 生活状况和文件

@ 见 DEMO 堆点

选择对应您的 Angular 版本的版本 :

开始

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

设置

@angular/ material Datepicker 的配置和导入方式基本上相同 .

import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
@NgModule({
   ...
   imports: [
      BrowserModule,
      HttpClientModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      NgxMatTimepickerModule,
      FormsModule,
      ReactiveFormsModule,
      MatButtonModule,
      NgxMatDatetimePickerModule,
   ],
   ...
})
export class AppModule { }

@ 见 src/app/demo-datetime/demo-datetime.module.ts (中文(简体) )

使用组件

与 @angular/ material Datepicker 相同的 API (@ 见) API 文件(中文(简体) )

日期时间拾取器(ngx-mat-date-time-拾取器)

<mat-form-field>
   <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
      [min]="minDate" [max]="maxDate" [disabled]="disabled">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
      [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
      [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian" 
      [disableMinute]="disableMinute" [hideTime]="hideTime">
   </ngx-mat-datetime-picker>
</mat-form-field>

取时器(ngx-mat-time)

<ngx-mat-timepicker [(ngModel)]="date"></ngx-mat-timepicker>
<ngx-mat-timepicker [(ngModel)]="date" [disabled]="disabled"></ngx-mat-timepicker>
<ngx-mat-timepicker [(ngModel)]="date" [stepHour]="2" [stepMinute]="5" [stepSecond]="10"></ngx-mat-timepicker>
<ngx-mat-timepicker [(ngModel)]="date" [showSpinners]="showSpinners"></ngx-mat-timepicker>
<ngx-mat-timepicker [(ngModel)]="date" [showSeconds]="showSeconds"></ngx-mat-timepicker>
<ngx-mat-timepicker [(ngModel)]="date" [disableMinute]="disableMinute"></ngx-mat-timepicker>
<ngx-mat-timepicker [(ngModel)]="date" [defaultTime]="defaultTime"></ngx-mat-timepicker>
<ngx-mat-timepicker [formControl]="formControl"></ngx-mat-timepicker>

@ 输入 ngx- mat- time picker 列表

您可以使用所有@ 输入 ngx- mat- time picker 为 ngx- mat- date- time- picker

选择日期执行和日期格式设置

取枣者是不可知的日期。 这意味着可以与各种不同日期的实施合作。 然而,这也意味着开发者需要确保为取枣者提供合适的棋子来配合其选定的执行.

确保这一点的最简单方法是导入一个提供的日期模块:

要使用 NgxMatMoment 模块 :

npm install --save  @angular-material-components/moment-adapter

请注意:NgxMatNativeDateModule是基于JavaScript本地日期对象中可用的功能. 因此,它不适合许多当地人。 本地 Date 对象的最大缺点之一是无法设置剖析格式.

我们强烈建议使用 NgxMat Moment 模块 或习惯 NgxMatDate 自动调试器 与您选择的格式库/分隔库配合.

例如:

创建自定义日期适配器 :

@Injectable()
export class CustomDateAdapter extends NgxMatDateAdapter<D> {...}
// D can be Date, Moment or customized type

创建自定义的日期适配模块

@NgModule({
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: CustomDateAdapter,
      deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    }
  ],
})
export class CustomDateModule { }

您也可以在模块中提供自定义的 NGQMAT DATE FORMATS 来自定义日期格式 .

// If using Moment
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: "l, LTS"
  },
  display: {
    dateInput: "l, LTS",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

//and in the module providers 
providers: [
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS }
  ]

他们

• @ 见@angular/材料 使用预建的主题
• 在索引.html中添加材料设计图标字体

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

许可证

麻省理工学院