# @dhutaryan/ngx-mat-timepicker 中文文档

规范地址：https://npmcn.com/package/%40dhutaryan/ngx-mat-timepicker/

版本：22\.0\.0
npm 元数据更新时间：2026-09-15T14:38:09.137Z
中文译文更新时间：2026-11-12T06:22:21.630Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dhutaryan/ngx-mat-timepicker
原文对照：https://npmcn.com/package/%40dhutaryan/ngx-mat-timepicker/?lang=original
项目主页：https://dhutaryan.github.io/ngx-mat-timepicker/
源码仓库：https://github.com/dhutaryan/ngx-mat-timepicker

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：475 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core \>=22\.0\.0，@angular/common \>=22\.0\.0，@angular/material \>=22\.0\.0
- 首次发布：2023-04-26T15:58:42.393Z
- 最新版本发布：2026-09-15T14:28:36.159Z
- 近 30 天下载量：17647（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：83（近 12 个月 4 个）

## 中文简介

取角计时器可以添加基于材料设计和取角材料的时间.

## 安装

```sh
npm install @dhutaryan/ngx-mat-timepicker
```

也可以使用：`pnpm add @dhutaryan/ngx-mat-timepicker`、`yarn add @dhutaryan/ngx-mat-timepicker`、`bun add @dhutaryan/ngx-mat-timepicker`

## README

# ngx-mat-time 拾取器

[![npm](https://img.shields.io/npm/v/@dhutaryan/ngx-mat-timepicker.svg)](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker) [![code factor](https://img.shields.io/codefactor/grade/github/dhutaryan/ngx-mat-timepicker)](https://www.codefactor.io/repository/github/dhutaryan/ngx-mat-timepicker) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40dhutaryan%2Fngx-mat-timepicker)

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

### 版本数

| 时间选择器 | 角质 |
| --- | --- |
| 22.x.x (中文(简体) ) | \>=22.0.0 |
| 21.x.x (中文(简体) ) | 页:1 |
| 20.1x (中文(简体) ) | 页:1 |
| 20.0.x (中文(简体) ) | 页:1 |
| 19.x.x (中文(简体) ) | \>=19.0.0 |
| 18.x.x (中文(简体) ) | \>=18.0.0 |
| 17.x.x (中文(简体) ) | ^17.0 |
| 16.x.x (中文(简体) ) | ^16.0 |
| 15.x.x (英语) | ^15.0 |
| 14.x.x (英语) | ^14.0.0 (中文(简体) ) |
| 13.x.x (英语) | \>= 13.0.0 && < 15.0.0 |
| 12.x.x (中文(简体) ) | \>= 12.0.0 && < 15.0.0 |

## 文档

看看这个 [文档](https://dhutaryan.github.io/ngx-mat-timepicker/)。 。 。 .

## 安装

需要安装角材料并设置. [了解更多设置](https://material.angular.io/guide/getting-started)。 。 。 .

安装库 :

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

或者说

```bash
$ yarn add @dhutaryan/ngx-mat-timepicker
```

## 开始

导入 `MatTimepickerModule` 你的项目.

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

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

## 适配器

添加取时器适配器.

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

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

或创建自己的

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

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

## 他们

那你必须定义一个主题. [更多关于主题的细节](https://material.angular.io/guide/theming)。 。 。 .

```scss
@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` 换成混音.

## 使用量

```html
<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`。您可以将您的语言设置为:

```typescript
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 {}
```

## 许可证

麻省理工学院

## 常见问题

### @dhutaryan/ngx-mat-timepicker 是什么？

取角计时器可以添加基于材料设计和取角材料的时间\.

### 如何安装 @dhutaryan/ngx-mat-timepicker？

在项目目录运行 npm install @dhutaryan/ngx-mat-timepicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=22\.0\.0）、@angular/common（\>=22\.0\.0）、@angular/material（\>=22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dhutaryan/ngx-mat-timepicker 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dhutaryan/ngx-mat-timepicker 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dhutaryan/ngx-mat-timepicker 可以商用吗？

@dhutaryan/ngx-mat-timepicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dhutaryan/ngx-mat-timepicker 的下载量有多少？

根据 npm 官方下载统计，@dhutaryan/ngx-mat-timepicker 在 2026/10/12 – 2026/11/10 这 30 天内被下载 17,647 次，日均约 588 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dhutaryan/ngx-mat-timepicker 还在维护吗？

最新版本 22\.0\.0 发布于 2026/09/15（1 个月前）；至今共发布 83 个版本，其中过去 12 个月发布了 4 个；首次发布于 2023/04/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。