# @alexfriesen/ngx-mat-timepicker 中文文档
规范地址：https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/
版本：19\.0\.1
npm 元数据更新时间：2024-12-17T11:07:33.773Z
中文译文更新时间：2026-11-07T07:34:06.559Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40alexfriesen/ngx-mat-timepicker
原文对照：https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/?lang=original
项目主页：https://alexfriesen.github.io/ngx-mat-timepicker
源码仓库：https://github.com/alexfriesen/ngx-mat-timepicker
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：481 kB，51 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@angular/animations ^19\.0\.0，@angular/cdk ^19\.0\.0，@angular/common ^19\.0\.0，@angular/compiler ^19\.0\.0，@angular/core ^19\.0\.0，@angular/forms ^19\.0\.0，@angular/material ^19\.0\.0，@angular/platform-browser ^19\.0\.0
- 首次发布：2023-11-18T13:17:11.892Z
- 最新版本发布：2024-12-17T11:07:33.579Z
- 近 30 天下载量：2010（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）
## 中文简介
ngx-mat-time取出器是一种角材料17+扩展来添加取出器!
## 安装
```sh
npm install @alexfriesen/ngx-mat-timepicker
```
也可以使用：`pnpm add @alexfriesen/ngx-mat-timepicker`、`yarn add @alexfriesen/ngx-mat-timepicker`、`bun add @alexfriesen/ngx-mat-timepicker`
## README
# @alexfriesen/ngx-mat-time捡取器
[](https://www.npmjs.com/package/@alexfriesen/ngx-mat-timepicker) [](https://github.com/alexfriesen/ngx-mat-timepicker/blob/master/LICENSE) [](https://github.com/alexfriesen/ngx-mat-timepicker/actions) [](https://img.shields.io/bundlephobia/minzip/@alexfriesen/ngx-mat-timepicker)
使用Angular Matery的简单取时器模块:它为时间选择提供了Android风格对话框,为材料风格的时间选择提供了手动输入.
## 目录
- [开始](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-getting-started)
- [国际化](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-internationalization)
- [文档](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-documentation)
- [NgxMatTime 选择器](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-ngxMatTimepicker)
- [Ngx MatTime 拾取器组件](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-ngxMatTimepickercomponent)
- [NgxMatTimeicker 字段组件](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-ngxMatTimepickerfieldcomponent)
- [Ngx MatTime 拾取器切换组件](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-ngxMatTimepickertogglecomponent)
- [NgxMatTime Pickers 切换Icon指令](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-ngxMatTimepickertoggleicondirective)
- [发展](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-development)
- [测试](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-tests)
- [许可证](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/#readme-license)
## 开始
通过 npm 安装计时器 :
```bash
npm i --save @alexfriesen/ngx-mat-timepicker
```
下次将计时器模块导入您的应用模块 :
```typescript
import { NgModule } from '@angular/core';
import { NgxMatTimepickerModule } from '@alexfriesen/ngx-mat-timepicker';
@NgModule({
imports: [NgxMatTimepickerModule],
})
export class MyModule {}
```
最后通过模板属性将分时器连接到输入:
```html
```
点击输入后, 计时器会打开
## 国际化
时间拾取器支持格式的本地化 `BCP 47`它已经 `en-US` 默认语言.
覆盖默认语言 :
```typescript
import { NgModule } from '@angular/core';
import { NgxMatTimepickerModule } from '@alexfriesen/ngx-mat-timepicker';
@NgModule({
imports: [NgxMatTimepickerModule.setLocale('en-GB')],
})
export class MyModule {}
```
## 他们
此软件包依赖于现有的角材料主题 :
```scss
@import '@angular/material/prebuilt-themes/indigo-pink.css';
```
或者说
```scss
@use '@angular/material' as mat;
@include mat.all-component-themes($my-theme);
```
## 文档
#### 角质分时器的 API 引用
```typescript
import { NgxMatTimepickerModule } from '@alexfriesen/ngx-mat-timepicker';
```
#### NgxMatTime 选择器
负责管理计时器弹出和设置输入值的指示
选择器 : `ngxMatTimepicker`
**属性**
| 名称 | 说明 |
| --- | --- |
| @ Input () ngx MatTime 拾取器: NgxMatTime拾取器 组件 | 此输入关联的计时器 . |
| @ 输入 () 颜色:主题Palette | 要使用的材料调色板. |
| @ 输入 () 已禁用:布尔 | 天气时标弹出应被禁用 . |
| @ 输入() 值:字符串 | 为计时器设定默认值和时间 。 时间格式为12小时注解 `11:00 PM` 或在24小时内注出 `23:00`约会字符串不起作用 . |
| @ Input () 格式 : 编号 | `12` 或者说 `24` 12h/24h 时钟选择视图 . `12` (AM/PM)格式默认. |
| @ 输入 () 分: 字符串或日期时间 | 设定计时器的分钟时间( M)`11:15 pm` (中文(简体) ) |
| @ input () 最大: 字符串或日期时间 | 设定时间`11:15 pm` (中文(简体) ) |
| @ input () 禁用 Click: 布尔 | 设定 `true` 通过点击输入来禁用打开时间 |
#### NgxMatTimePicker 本地服务
此服务允许 **随时更改地址**。 。 。 .
您可以在您的组件中注入此选项或扩展并提供您的版本, 以便向所有的拾取者提供您的当前语言 !
此时此刻 **半静态**,这意味着你无法改变已经打开的拾取器的用地.
不过 **新拾取者总是会得到更新的地盘**。 。 。 .
#### Ngx MatTime 拾取器组件
负责可视化取时器的组件
选择器 : `ngx-mat-timepicker`
**属性**
| 名称 | 说明 |
| --- | --- |
| @ info () 取消 BtnTmpl: Template Ref | 设定要更改自定义的取消按钮 . |
| @ Input () 确认 BtnTmpl: Template Ref | 设定要更改自定义的确认按钮 . |
| @ Input () 可编辑 HintTmpl: Template Ref | 设定要更改自定义的拨号提示 。 只有在 `enableKeyboardInput = true` |
| @ 输入 () ESC:布尔 | ESC 禁用或启用关闭计时器 . |
| @ int () 启用键盘输入:布尔 | 通过计时器拨号上的键盘来禁用或启用改变时间,而不与时钟面进行交互. 设定 `false` 默认 |
| @ 输入 () 分钟Gap: 号码 | 定义分钟之间的间隔 。 设定 `1` 默认 |
| @ 输入 () 默认时间: 字符串 | 为计时器设定默认时间 . `12:00 AM` 默认 |
| @ Input () 防止重叠克:布尔 | 设定 `true` 来防止通过覆盖点击关闭计时器。 用途 `false` 默认 |
| @ 输入 () 禁用动画 :布尔 | 设定 `true` 防止打开和关闭取时器动画。 用途 `false` 默认 |
| @ input () 小时仅:布尔 | 设定 `true` 以防止在选择小时后自动切换到分钟。 用途 `false` 默认 |
| @ Input () 主题: NgxMatTimepicker Theme | 自定义 Css 属性将覆盖默认值 |
| @ input () 计时器分类: 字符串 | 为计时器提供自定义的 Cs 类 |
| @output () 时间设置: 事件Emitter < string> | 设定时间. |
| @ Output () 打开: EventEmitter | 打开取出时间的提示 . |
| @ Output () 关闭 : EventEmitter | 计时器被关闭之后的输出. |
| @ Output () 小时选中: 事件Emitter < 数字> | 选择了小时后发送. |
| @ Output () 时间变化: 事件Emitter < string> | 一次时间被改变. |
#### NgxMatTimeicker 字段组件
取时者作取相.
选择器 : `ngx-mat-timepicker-field`
**属性**
| 名称 | 说明 |
| --- | --- |
| @ 输入 () 已禁用:布尔 | 是否禁用计时器 |
| @ Input () 浮标 : '永远' 或 '永远' 或 '自动' | 字段的标签是否浮动, 默认为永远 |
| @ Input () toggleIcon: Template Ref (中文(简体) ) | 提供自定义 `svg` 图标 |
| @ input () 按钮对齐 : “ 右” 或 “ 左 ” | 定位切换按钮( O)`right` (默认) |
| @ Input () 时钟主题: NgxMatTime Picker 主题 | 自定义 css 属性, 将覆盖计时器时钟 |
| @ input () 仅控制:布尔 | 隐藏或显示取时钟的切换按钮 |
| @ Input () 格式 : 编号 | `12` 或者说 `24` 。设置计时器的格式. `12` (AM/PM)格式默认. |
| @ Input () 取消 BtnTmpl: Template Ref | 如果您想要更改用于计时器的取消按钮, 请设定为您的自定义按钮 . |
| @ Input () 确认BtnTmpl: Template Ref | 设定是否要更改用于计时器的确认按钮到自定义的按钮 . |
| @ 输入 () 分: 字符串或日期时间 | 设定计时器的分钟时间( M)`11:15 pm` (中文(简体) ) |
| @ input () 最大: 字符串或日期时间 | 设定时间`11:15 pm` (中文(简体) ) |
@ 输出( )
时间变化: 事件Emitter < string > QQ 一旦更改, 则释放新时间。 |
#### Ngx MatTime 拾取器切换组件
负责打开取时器的组件.
选择器 : `ngx-mat-timepicker-toggle`
**属性**
| 名称 | 说明 |
| --- | --- |
| @ input () for: NgxMatTimePicker Component (英语) | 将按钮切换的计时器实例 |
| @ 输入 () 已禁用:布尔 | 切换按钮是否被禁用 |
#### NgxMatTime Pickers 切换Icon指令
可用于覆盖一个 `NgxMatTimepickerToggleComponent`。 。 。 .
选择器 : `[ngxMatTimepickerToggleIcon]`
**属性**
| 名称 | 说明 |
| --- | --- |
| @ Input () ngx MatTime Pickers Theme: NgxMatTime Pickers Theme (英语) | 自定义 Css 属性将覆盖默认值 |
### 演示
[演示](https://alexfriesen.github.io/ngx-mat-timepicker/)
```terminal
$ npm
$ npm start
```
运行 `npm test` 测试一次.
## 许可证
这个项目根据麻省理工学院许可证颁发——见 [自由主义](https://npmcn.com/package/%40alexfriesen/ngx-mat-timepicker/LICENSE) 详细文件
### 感谢
[拉齐DK](https://github.com/LayZeeDK) - 因为他在单位测试和升级方面的出色工作
[阿格拉诺姆](https://github.com/Agranom) 用于设置原始的repo.
## 常见问题
### @alexfriesen/ngx-mat-timepicker 是什么？
ngx-mat-time取出器是一种角材料17\+扩展来添加取出器\!
### 如何安装 @alexfriesen/ngx-mat-timepicker？
在项目目录运行 npm install @alexfriesen/ngx-mat-timepicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/animations（^19\.0\.0）、@angular/cdk（^19\.0\.0）、@angular/common（^19\.0\.0）、@angular/compiler（^19\.0\.0）、@angular/core（^19\.0\.0）、@angular/forms（^19\.0\.0）、@angular/material（^19\.0\.0）、@angular/platform-browser（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @alexfriesen/ngx-mat-timepicker 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @alexfriesen/ngx-mat-timepicker 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @alexfriesen/ngx-mat-timepicker 可以商用吗？
@alexfriesen/ngx-mat-timepicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @alexfriesen/ngx-mat-timepicker 的下载量有多少？
根据 npm 官方下载统计，@alexfriesen/ngx-mat-timepicker 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,010 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @alexfriesen/ngx-mat-timepicker 还在维护吗？
最新版本 19\.0\.1 发布于 2024/12/17（1\.9 年前）；至今共发布 11 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/11/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。