# @angular-material-components/datetime-picker 中文文档 规范地址：https://npmcn.com/package/%40angular-material-components/datetime-picker/ 版本：16\.0\.1 npm 元数据更新时间：2023-08-02T04:33:26.063Z 中文译文更新时间：2026-11-06T04:12:58.878Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40angular-material-components/datetime-picker 原文对照：https://npmcn.com/package/%40angular-material-components/datetime-picker/?lang=original 项目主页：https://github.com/h2qutc/angular-material-components 源码仓库：https://github.com/h2qutc/angular-material-components ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.6 MB，69 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：@angular/platform-browser ^16\.0\.0，@angular/common ^16\.0\.0，@angular/core ^16\.0\.0，@angular/forms ^16\.0\.0，@angular/material ^16\.0\.0，@angular/cdk ^16\.0\.0 - 首次发布：2020-03-22T23:45:38.257Z - 最新版本发布：2023-08-02T04:33:25.945Z - 近 30 天下载量：117137（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：40（近 12 个月 0 个） ## 中文简介 角质取出日期 ## 安装 ```sh npm install @angular-material-components/datetime-picker ``` 也可以使用：`pnpm add @angular-material-components/datetime-picker`、`yarn add @angular-material-components/datetime-picker`、`bun add @angular-material-components/datetime-picker` ## README # 角材料 日期选择器,取出@angular/材料 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x [![Build Status](https://travis-ci.com/h2qutc/angular-material-components.svg?branch=master)](https://travis-ci.com/h2qutc/angular-material-components) [![License](https://img.shields.io/npm/l/angular-material-components.svg)](https://www.npmjs.com/package/angular-material-components) [![npm version](https://badge.fury.io/js/%40angular-material-components%2Fdatetime-picker.svg)](https://www.npmjs.com/package/@angular-material-components/datetime-picker) ![Github All Releases](https://img.shields.io/npm/dt/@angular-material-components/datetime-picker.svg) ## 说明 像 @angular/ material 这样的日期选择器 [摘取日期者](https://material.angular.io/components/datepicker/overview) 为选择时间添加支持. [![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://www.buymeacoffee.com/h2qutc) ## 德莫尔 @ 见 [生活状况和文件](https://h2qutc.github.io/angular-material-components/) @ 见 [DEMO 堆点](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker) ![Alt Text](https://npmcn.com/package/%40angular-material-components/datetime-picker/demo_datetime_picker.png) 选择对应您的 Angular 版本的版本 : | 角质 | @ angular- material- 组件/ 日期时间选择器 | | --- | --- | | 16个 | 16.x+ (中文(简体) ) | | 15个 | 15.x+ OR 9.x+ 用于遗留的导入 | | 页:1 | 8.x+ 单曲 | | 第13条 | 7.x+ (中文(简体) ) | | 第12条 | 6.x+ 调取 | | 第11个 | 5.x+ 时速 | | 10个 | 4.x+ (中文(简体) ) | | 第9条 | 2.x+ 时速 | | 第8条 | 2.x+ 时速 | | 第7条 | 2.x+ 时速 | ## 开始 ``` 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 (中文(简体) )](https://npmcn.com/package/%40angular-material-components/datetime-picker/src/app/demo-datetime/demo-datetime.module.ts) ## 使用组件 与 @angular/ material Datepicker 相同的 API (@ 见) [API 文件](https://material.angular.io/components/datepicker/api)(中文(简体) ) ### 日期时间拾取器(ngx-mat-date-time-拾取器) ``` ``` ### 取时器(ngx-mat-time) ``` ``` #### @ 输入 ngx- mat- time picker 列表 _您可以使用所有@ 输入 ngx- mat- time picker 为 ngx- mat- date- time- picker_ | @ 输入 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | **已禁用** | 布尔 | 无效 | 如果选中的话, 选择器只能读, 不能修改 | | **显示剪接器** | 布尔 | 真实 | 如果真实, 上下输入的旋转器可见 | | **显示秒** | 布尔 | 真实 | 如果为真, 则无法选择秒 | | **禁用最小值** | 布尔 | 虚假 | 如果为真, 分钟( 和秒) 只读 | | **默认时间** | 阵列 | 未定义 | 当日期尚未定义时默认时间的数组 \[小时, 分钟, 秒\] | | **步进** | 编号 | 1个 | 点击小时旋转器时要添加/ 减法的小时数 | | **步骤** | 编号 | 1个 | 点击分钟自旋器时添加/ 减值的分钟数 | | **第二档** | 编号 | 1个 | 单击第二个自旋器时要添加/ 减值的秒数 | | **颜色** | 主题标签 | 未定义 | 选取日期日历上要使用的颜色调色板 . | | **启用梅里迪亚语** | 布尔 | 虚假 | 是否显示 12H 或 24H 模式 . | | **隐藏时间** | 布尔 | 虚假 | 如是等时所藏. | | **触动Ui** | 布尔 | 虚假 | 日历 UI 是否处于触摸模式 。 在触摸模式下,日历以对话框而不是弹出方式打开,元素有较多的粘贴来允许更大的触摸目标. | ## 选择日期执行和日期格式设置 取枣者是不可知的日期。 这意味着可以与各种不同日期的实施合作。 然而,这也意味着开发者需要确保为取枣者提供合适的棋子来配合其选定的执行. 确保这一点的最简单方法是导入一个提供的日期模块: | | **Ngx MatNativeDate 模块** | **NgxMat Moment 模块** | | --- | --- | --- | | **日期类型** | 日期 | 时刻 | | **支持的地方** | 页:1 美国 | [详情见项目](https://github.com/moment/moment/tree/develop/src/locale) | | **依赖关系** | 无 | [时刻.js](https://momentjs.com/) | | **从** | @ angular- material- 组件/ 日期时间选择器 | [@angular -- -- 材料 -- -- 组件/运动 -- -- 适应器](https://www.npmjs.com/package/@angular-material-components/moment-adapter) | 要使用 NgxMatMoment 模块 : ``` npm install --save @angular-material-components/moment-adapter ``` 请注意:NgxMatNativeDateModule是基于JavaScript本地日期对象中可用的功能. 因此,它不适合许多当地人。 本地 Date 对象的最大缺点之一是无法设置剖析格式. 我们强烈建议使用 **NgxMat Moment 模块** 或习惯 **NgxMatDate 自动调试器** 与您选择的格式库/分隔库配合. 例如: 创建自定义日期适配器 : ``` @Injectable() export class CustomDateAdapter extends NgxMatDateAdapter {...} // 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/材料 [使用预建的主题](https://material.angular.io/guide/theming#using-a-pre-built-theme) - 在索引.html中添加材料设计图标字体 ``` ``` ## 许可证 麻省理工学院 ## 常见问题 ### @angular-material-components/datetime-picker 是什么？ 角质取出日期 ### 如何安装 @angular-material-components/datetime-picker？ 在项目目录运行 npm install @angular-material-components/datetime-picker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/platform-browser（^16\.0\.0）、@angular/common（^16\.0\.0）、@angular/core（^16\.0\.0）、@angular/forms（^16\.0\.0）、@angular/material（^16\.0\.0）、@angular/cdk（^16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @angular-material-components/datetime-picker 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @angular-material-components/datetime-picker 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @angular-material-components/datetime-picker 可以商用吗？ @angular-material-components/datetime-picker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @angular-material-components/datetime-picker 的下载量有多少？ 根据 npm 官方下载统计，@angular-material-components/datetime-picker 在 2026/10/06 – 2026/11/04 这 30 天内被下载 117,137 次，日均约 3,905 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @angular-material-components/datetime-picker 还在维护吗？ 最新版本 16\.0\.1 发布于 2023/08/02（3 年前）；至今共发布 40 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/03/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。