# @danielmoncada/angular-datetime-picker 中文文档

规范地址：https://npmcn.com/package/%40danielmoncada/angular-datetime-picker/

版本：22\.0\.0
npm 元数据更新时间：2026-08-05T15:05:40.704Z
中文译文更新时间：2026-11-11T10:27:18.091Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40danielmoncada/angular-datetime-picker
原文对照：https://npmcn.com/package/%40danielmoncada/angular-datetime-picker/?lang=original
项目主页：https://github.com/danielmoncada/date-time-picker
源码仓库：https://github.com/danielmoncada/date-time-picker

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

- 包体积（解压后）：1 MB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common ^21\.0\.0 \|\| ^22\.0\.0，@angular/core ^21\.0\.0 \|\| ^22\.0\.0，@angular/cdk ^21\.0\.0 \|\| ^22\.0\.0
- 首次发布：2020-02-11T19:37:53.955Z
- 最新版本发布：2026-08-05T15:05:40.554Z
- 近 30 天下载量：226158（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：50（近 12 个月 3 个）

## 中文简介

角约会时间拾取器

## 安装

```sh
npm install @danielmoncada/angular-datetime-picker
```

也可以使用：`pnpm add @danielmoncada/angular-datetime-picker`、`yarn add @danielmoncada/angular-datetime-picker`、`bun add @danielmoncada/angular-datetime-picker`

## README

# : 日期: : 小时1: 角日期/时间拾取器

[![npm](https://img.shields.io/npm/v/@danielmoncada/angular-datetime-picker.svg?maxAge=2592000?style=flat-square)](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker) [![npm](https://img.shields.io/npm/dm/@danielmoncada/angular-datetime-picker.svg)](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker)

**此软件包的当前版本支持 Angular 22**

如果您需要其它角版本的支持, 请参见 _中断更改_ 见下文.

## 中断更改

-   22.x.x版本为Angular 22的正式发布,也支持Angular 21.
-   21.x.x版本是Angular 21的正式发布,它也支持Angular 20.
-   20.x.x版本是Angular 20的正式发布,它也支持Angular 19.
-   版本19.x.x >=已不支持ng 18. 如果您需要ng 18支持,请坚持18.x.x版本.
-   版本18.x.x 已不支持ng 17. 如果您需要ng 17支持,请坚持17.x.x版本.
-   版本17.x.x->=已不支持ng 16-13. 如果需要ng 16-13支持,请坚持16.x.x版本.
-   14.x.x >=已不支持 < ng 13. 如果您需要 View 引擎支持,请坚持13.x.x版本.
-   13.1.0+版本不再支持 `MomentJs` 时间适配器。 如果您想要使用 MomentJs 适配器, 请查看 [GitHub 图像](https://github.com/danielmoncada/date-time-picker-moment-adapter) 或者说 [无](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker-moment-adapter)。 。 。 .
-   需要ng 8支持时,请坚持: [https://github.com/DanielYKPan/date-time-cicker 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/DanielYKPan/date-time-picker)

## 说明

简单的角枣取时器. 在线医生 [这里](https://daniel-projects.firebaseapp.com/owlng/date-time-picker),在线演示(StackBlitz)是 [这里](https://stackblitz.com/edit/angular-vvp849) 财务报告和审定财务报表 [这里](https://stackblitz.com/edit/angular-i7ykf5)。 。 。 . 这个拾取器是反应性的设计,所以可以随意在您的桌面,平板电脑和移动设备中尝试.

## 如何使用

1.  安装方式 [无](https://www.npmjs.com/)数字 : `npm install @danielmoncada/angular-datetime-picker --save`
    
2.  安装 [`@angular/cdk`](https://material.angular.io/cdk/categories),它是一个对等依赖,并提供采取者使用的覆盖: `npm install @angular/cdk --save`。 。 。 . 如果您的应用程序已经使用 [角质材料](https://material.angular.io/),为您安装了 CDK,这个步骤(和下面的上覆样式)已经覆盖了.
    
3.  添加样式. 拾取器将它的弹出/对话框放入一个CDK上方,所以你既需要拾取器样式,也需要CDK预建的上方样式. 如果你是的话 **没有** 使用角材料, 加入一次 `styles.scss`数字 :
    
    ```scss
    @use '@angular/cdk/overlay-prebuilt.css';
    @use '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
    ```
    
    或通过 `styles` 阵列 `angular.json`数字 :
    
    ```json
    "styles": [
        "node_modules/@angular/cdk/overlay-prebuilt.css",
        "node_modules/@danielmoncada/angular-datetime-picker/assets/style/picker.min.css",
        "src/styles.scss"
    ]
    ```
    
    (如果您已经导入 Angular 材料的主题, 则包含 CDK 覆盖样式, 您只需要取取取样式 。)
    
4.  添加 **猫头鹰时间模块** 财务报告和审定财务报表 **猫头鹰时间模块** 给您的 **@ NgMudule (英语)** 类似下文的例子
    
    ```typescript
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { MyTestApp } from './my-test-app';
    import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
    
    @NgModule({
        imports: [BrowserModule, OwlDateTimeModule, OwlNativeDateTimeModule],
        declarations: [MyTestApp],
        bootstrap: [MyTestApp],
    })
    export class MyTestAppModule {}
    ```
    
5.  连接拾取器与输入和触发器.
    
    ```html
    <input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time" /> <owl-date-time #dt1></owl-date-time>
    ```
    
    ```html
    <input [owlDateTime]="dt2" placeholder="Date Time" />
    <span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
    <owl-date-time #dt2></owl-date-time>
    ```
    
    以上例子相当基本。 拾取者还有更多特征, 你可以更多地了解这些 [演示页面](https://danielykpan.github.io/date-time-picker/)。 。 。 .
    

## 选择日期执行

日期取出器的建造是日期执行不可知. 开发者需要确保为拾取者提供合适的棋子来配合所选择的实施. 有两个预先制作的模块,用户需要导入其中的一款或自己建一款(从 [这里](https://danielykpan.github.io/date-time-picker/#locale-formats)) (中文(简体) ).

-   `OwlNativeDateTimeModule` - 支持本地 JavaScript 日期对象
-   `OwlUnixTimestampDateTimeModule` - 支持自Epoch起的毫秒(数目)

##### 日期/时间适应器扩展

![](https://day.js.org/img/logo.png) [https://day.js.org/ (中文(简体) )](https://day.js.org/)

-   `OwlDayJsDateTimeModule` - 对DayJs的支持
    -   您必须安装一个可选的插图来使用 。 见 [这里](https://github.com/danielmoncada/date-time-picker-dayjs-adapter), (中文(简体) ), [无](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker-dayjs-adapter)

![](https://avatars.githubusercontent.com/u/4129662?s=200&v=4) [https://momentjs.com/ 请检查isbn=值 (帮助)](https://momentjs.com/)

-   `OwlMomentDateTimeModule` - 支持运动Js
    -   您必须安装一个可选的插图来使用 。 见 [这里](https://github.com/danielmoncada/date-time-picker-moment-adapter), (中文(简体) ), [无](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker-moment-adapter)

## 属性 `owl-date-time`

| 名称 | 类型 | 需求 | 默认 | 说明 |
| :-- | :-- | :-- | :-- | :-- |
| `pickerType` | `both`, (中文(简体) ), `calendar`, (中文(简体) ), `timer` | 可选 | `both` | 设定日期时间拾取器的类型 . `both`: 显示日历和计时器, `calendar`: 只显示日历, `timer`:只有显示计时器. |
| `pickerMode` | `popup`, (中文(简体) ), `dialog` | 可选 | `popup` | 选手的风格会打开. |
| `startView` | `month`, (中文(简体) ), `year`, (中文(简体) ), `multi-year` | 可选 | `month` | 关于日历应该开始的观点. |
| `yearOnly` | 布尔 | 可选 | `false` | 限定日历仅显示月份选择的年份和多年期视图. |
| `showCalendarWeeks` | 布尔 | 可选 | `false` | 是否在日历中显示日历周 . |
| `multiyearOnly` | 布尔 | 可选 | `false` | 限制日历只显示选择年份的多年视图. |
| `startAt` | 吨/吨 | 可选 | `null` | 打开拾取器开始的时刻. |
| `endAt` | 吨/吨 | 可选 | `null` | 区域日历结束时间的默认选择时间 |
| `firstDayOfWeek` | 编号 | 可选 | `0` | 设出礼拜一日. 有效值从0到6. 0:星期日至6:星期六 |
| `showSecondsTimer` | 布尔 | 可选 | `false` | 当指定为真时, 它会显示一个定时器来配置第二个值 |
| `hideOtherMonths` | 布尔 | 可选 | `false` | 是否在本月份开始或结束时隐藏其他月份的日期 |
| `hour12Timer` | 布尔 | 可选 | `false` | 当指定为真时, 计时器将以小时12 格式模式 |
| `stepHour` | 编号 | 可选 | `1` | 每一步换个小时. |
| `stepMinute` | 编号 | 可选 | `1` | 每一步变化一分钟. |
| `stepSecond` | 编号 | 可选 | `1` | 每步变化秒. |
| `scrollStrategy` | 滚动战略 | 可选 | `BlockScrollStrategy` | 打开拾取器时定义滚动策略 。 学这些 [https://material.angular.io/cdk/overlay/overview#scroll-战略](https://material.angular.io/cdk/overlay/overview#scroll-strategies)。 。 。 . |
| `disabled` | 布尔 | 可选 | `false` | 当指定为真时, 它会禁用拾取器 . |
| `backdropClass` | 字符串/字符串 \[\] | 可选 | `null` | 采取背景的自定义类 . |
| `panelClass` | 字符串/字符串 \[\] | 可选 | `null` | 采取器上覆面板的自定义类 . |

## 活动 `owl-date-time`

| 活动 | 参数 | 说明 |
| :-- | :-- | :-- |
| `beforePickerOpen` | 无效 | 在拾取器打开前召回引用 |
| `afterPickerOpen` | 无效 | 打开拾取器时召回引用 |
| `afterPickerClosed` | 无效 | 采取者闭口后召回引出. |
| `yearSelected` | T级 | 选择年份时召回引用 。 这并不意味着选定日期有所改变. |
| `monthSelected` | T级 | 选定月份时调用以引用 。 这并不意味着选定日期有所改变. |
| `dateClicked` | T级 | 当选定数据发生变化时调用 . |
| `selectedChanged` | T级 | 当当前选中的数据改变时调用 . |
| `userSelection` | 无效 | 选择任何日期时召回 . |

## 属性 `input[owlDateTime]`

| 名称 | 类型 | 需求 | 默认 | 说明 |
| :-- | :-- | :-- | :-- | :-- |
| `owlDateTime` | `OwlDateTimeComponent<T>` | 需求 | `null` | 此输入相关的日期时间选择器 . |
| `owlDateTimeFilter` | `( date: T)=>boolean` | 可选 | `null` | 过滤日期时间的函数 . |
| `disabled` | 布尔 | 可选 | `false` | 当指定为真时, 它会禁用拾取器的输入 . |
| `min` | `<T>` | 可选 | `null` | 最小有效日期时间 . |
| `max` | `<T>` | 可选 | `null` | 最长有效日期时间 . |
| `selectMode` | `single`, (中文(简体) ), `range`, (中文(简体) ), `rangeFrom`, (中文(简体) ), `rangeTo` | 可选 | `single` | 指定拾取器的选择模式. `single`: 允许的单一值, `range`:允许用户选择日期时间范围, `rangeFrom`:输入只显示出"从"值,取出者只能选择出"从"值, `rangeTo`:输入只显示"to"值,取出者只能选择"to"值. |
| `rangeSeparator` | 字符串 | 可选 | `-` | 将输入值中的“ 从” 和“ 到” 区分开来字符 . |

## 活动 `input[owlDateTime]`

| 活动 | 参数 | 说明 |
| :-- | :-- | :-- |
| `dateTimeChange` | 资料来源:猫头鹰时间输入,值:输入值,输入:输入元素 | 召回时引用 `change` 事件为此开火 `<input [owlDateTime]>` |
| `dateTimeInput` | 资料来源:猫头鹰时间输入,值:输入值,输入:输入元素 | 当一个 `input` 事件为此开火 `<input [owlDateTime]>`。 。 。 . |

## 属性 `[owlDateTimeTrigger]`

| 名称 | 类型 | 需求 | 默认 | 说明 |
| :-- | :-- | :-- | :-- | :-- |
| `owlDateTimeTrigger` | `OwlDateTimeComponent<T>` | 需求 | `null` | 此触发器相关的日期时间选择器 . |
| `disabled` | 布尔 | 可选 | `false` | 当指定为真时, 它会禁用触发器 . |

## 属性 `[owlDateTimeTrigger]`

| 名称 | 类型 | 需求 | 默认 | 说明 |
| :-- | :-- | :-- | :-- | :-- |
| `owlDateTimeTrigger` | `OwlDateTimeComponent<T>` | 需求 | `null` | 此触发器相关的日期时间选择器 . |
| `disabled` | 布尔 | 可选 | `false` | 当指定为真时, 它会禁用触发器 . |

## 属性 `owl-date-time-inline`

| 名称 | 类型 | 需求 | 默认 | 说明 |
| :-- | :-- | :-- | :-- | :-- |
| `pickerType` | `both`, (中文(简体) ), `calendar`, (中文(简体) ), `timer` | 可选 | `both` | 设定日期时间拾取器的类型 . `both`: 显示日历和计时器, `calendar`: 只显示日历, `timer`:只有显示计时器. |
| `startView` | `month`, (中文(简体) ), `year`, (中文(简体) ), `multi-year` | 可选 | `month` | 关于日历应该开始的观点. |
| `startAt` | 吨/吨 | 可选 | `null` | 打开拾取器开始的时刻. |
| `endAt` | 吨/吨 | 可选 | `null` | 区域日历结束时间的默认选择时间 |
| `firstDayOfWeek` | 编号 | 可选 | `0` | 设出礼拜一日. 有效值从0到6. 0:星期日至6:星期六 |
| `showSecondsTimer` | 布尔 | 可选 | `false` | 当指定为真时, 它会显示一个定时器来配置第二个值 |
| `hideOtherMonths` | 布尔 | 可选 | `false` | 是否在本月份开始或结束时隐藏其他月份的日期 |
| `hour12Timer` | 布尔 | 可选 | `false` | 当指定为真时, 计时器将以小时12 格式模式 |
| `stepHour` | 编号 | 可选 | `1` | 每一步换个小时. |
| `stepMinute` | 编号 | 可选 | `1` | 每一步变化一分钟. |
| `stepSecond` | 编号 | 可选 | `1` | 每步变化秒. |
| `disabled` | 布尔 | 可选 | `false` | 当指定为真时, 它会禁用拾取器 . |
| `owlDateTimeFilter` | `( date: T)=>boolean` | 可选 | `null` | 过滤日期时间的函数 . |
| `min` | `<T>` | 可选 | `null` | 最小有效日期时间 . |
| `max` | `<T>` | 可选 | `null` | 最长有效日期时间 . |
| `selectMode` | `single`, (中文(简体) ), `range`, (中文(简体) ), `rangeFrom`, (中文(简体) ), `rangeTo` | 可选 | `single` | 指定拾取器的选择模式. `single`: 允许的单一值, `range`:允许用户选择日期时间范围, `rangeFrom`:输入只显示出"从"值,取出者只能选择出"从"值, `rangeTo`:输入只显示"to"值,取出者只能选择"to"值. |

## 本地化和日期时间格式

不同语言和格式的本地化由 `OWL_DATE_TIME_LOCALE` 财务报告和审定财务报表 `OWL_DATE_TIME_FORMATS`您可以从 [这里](https://danielykpan.github.io/date-time-picker#locale-formats)。 。 。 .

## 依赖关系

-   [`@angular/cdk`](https://material.angular.io/cdk/categories) ——提供取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 记住要包括 CDK 覆盖样式(`@use '@angular/cdk/overlay-prebuilt.css';`除非您已经使用角材料。 见 [如何使用](https://npmcn.com/package/%40danielmoncada/angular-datetime-picker/#readme-how-to-use)。 。 。 .

## 演示

-   在线医生 [这里](https://daniel-projects.firebaseapp.com/owlng/date-time-picker)
-   在线演示( StackBlitz) 是 [这里](https://stackblitz.com/edit/angular-vvp849) 财务报告和审定财务报表 [这里](https://stackblitz.com/edit/angular-i7ykf5)

## 许可证

-   许可证:麻省理工学院

## 作者

**由丹尼尔·蒙卡达(Daniel Moncada)维护和更新, 由丹尼尔·潘(Daniel Pan)原创执行**

## 常见问题

### @danielmoncada/angular-datetime-picker 是什么？

角约会时间拾取器

### 如何安装 @danielmoncada/angular-datetime-picker？

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

### @danielmoncada/angular-datetime-picker 支持 TypeScript 吗？

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

### @danielmoncada/angular-datetime-picker 支持 ESM 还是 CommonJS？

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

### @danielmoncada/angular-datetime-picker 可以商用吗？

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

### @danielmoncada/angular-datetime-picker 的下载量有多少？

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

### @danielmoncada/angular-datetime-picker 还在维护吗？

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