ngx-mat-time 拾取器

使用角材料的取时器模块.

版本数

文档

看看这个 文档。 。 。 .

安装

需要安装角材料并设置. 了解更多设置。 。 。 .

安装库 :

$ npm install --save @dhutaryan/ngx-mat-timepicker

或者说

$ yarn add @dhutaryan/ngx-mat-timepicker

开始

导入 MatTimepickerModule 你的项目.

import { MatTimepickerModule } from '@dhutaryan/ngx-mat-timepicker';

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
})
export class MyModule {}

适配器

添加取时器适配器.

import {
  MatTimepickerModule,
  provideNativeDateTimeAdapter,
} from '@dhutaryan/ngx-mat-timepicker';

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
  providers: [provideNativeDateTimeAdapter()],
})
export class MyModule {}

或创建自己的

import { MatTimepickerModule } from '@dhutaryan/ngx-mat-timepicker';

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
  providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],
})
export class MyModule {}

他们

那你必须定义一个主题. 更多关于主题的细节。 。 。 .

@use '@dhutaryan/ngx-mat-timepicker' as mat-timepicker;

// timepicker uses these component
@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
@include mat.input-theme(theme.$ngx-mat-timepicker-theme);
@include mat.button-theme(theme.$ngx-mat-timepicker-theme);
@include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
@include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
@include mat.divider-theme(theme.$ngx-mat-timepicker-theme);

// timepicker theme
@include mat-timepicker.timepicker-theme($theme);

// if you want to support color attribute in M3 add compatibility mixin
@include mat.color-variants-backwards-compatibility($my-theme);

您还可以使用 mat.theme 换成混音.

使用量

<mat-form-field>
  <input type="text" matInput [matTimepicker]="timepicker" />
  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
  <mat-timepicker #timepicker></mat-timepicker>
</mat-form-field>

语言

默认地址是 en-US。您可以将您的语言设置为:

import { NgModule } from '@angular/core';
import { MAT_TIME_LOCALE } from '@dhutaryan/ngx-mat-timepicker';

@NgModule({
  imports: [
    // ...
  ],
  providers: [{ provide: MAT_TIME_LOCALE, useValue: 'en-GB' }],
})
export class MyModule {}

许可证

麻省理工学院