# @busacca/ng-pick-datetime 中文文档

规范地址：https://npmcn.com/package/%40busacca/ng-pick-datetime/

版本：13\.0\.1
npm 元数据更新时间：2022-12-19T09:25:49.614Z
中文译文更新时间：2026-11-08T20:24:05.905Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40busacca/ng-pick-datetime
原文对照：https://npmcn.com/package/%40busacca/ng-pick-datetime/?lang=original

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

- 包体积（解压后）：2.4 MB，78 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>= 13\.0\.0，@angular/core \>= 13\.0\.0，@angular/forms \>= 13\.0\.0，@angular/cdk \>= 13\.0\.0，moment ^2\.29\.0
- 首次发布：2019-05-29T09:49:53.508Z
- 最新版本发布：2022-12-19T09:25:49.504Z
- 近 30 天下载量：3463（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 0 个）

## 中文简介

# 角约会时间拾取器

## 安装

```sh
npm install @busacca/ng-pick-datetime
```

也可以使用：`pnpm add @busacca/ng-pick-datetime`、`yarn add @busacca/ng-pick-datetime`、`bun add @busacca/ng-pick-datetime`

## README

# 角约会时间拾取器

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

**角日期时间拾取器 - 角重用 UI 组件** **此软件包支持角 9+**

## 中断更改

-   自 9. 0. 0 起, 采集器已更新为 Angular 9+ apps
-   自8.0.0起,取取器被更新为Angular 8+应用.
-   自7.0.0起,取取器被更新为角7+应用.

## 说明

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

## 如何使用

1.  安装方式 [无](https://www.npmjs.com/)数字 :`npm install ng-pick-datetime --save`
    
2.  添加样式. 如果您正在使用 Angular CLI, 您可以在您的样式中添加此功能. css :
    
    ```css
    @import "~ng-pick-datetime/assets/style/picker.min.css";
    ```
    
    或者如果你喜欢使用sass:
    
    ```css
    @import "~ng-pick-datetime/assets/style/picker.scss";
    ```
    
    如果您没有使用角CLI,您可以通过 a 加入 picker.min.css `<link>` 元素在索引.html中.
    
3.  添加 **猫头鹰时间模块** 财务报告和审定财务报表 **猫头鹰时间模块** 给您的 **@ NgMudule (英语)** 类似下文的例子
    
    ```typescript
     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { MyTestApp } from './my-test-app';
    
     import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
    
     @NgModule({
         imports: [ 
             BrowserModule, 
             OwlDateTimeModule, 
             OwlNativeDateTimeModule,
         ],
         declarations: [ MyTestApp ],
         bootstrap:    [ MyTestApp ]
     })
     export class MyTestAppModule {}
    ```
    
4.  连接拾取器与输入和触发器.
    
    ```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/)。 。 。 .
    

## 动画

这个采取器使用角动画来改善用户体验, 因此,您需要安装 `@angular/animations` 导入 `BrowserAnimationsModule` 您的应用程序.

```
npm install @angular/animations --save
```

```typescript
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class YourAppModule { }
```

如果您喜欢禁用动画效果, 请使用 `NoopAnimationsModule` 换句话说.

## 选择日期执行

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

-   `OwlNativeDateTimeModule` - 支持本地 JavaScript 日期对象
-   `OwlMomentDateTimeModule` - 支持运动Js

## 属性 `owl-date-time`

| 名称 | 类型 | 需求 | 默认 | 说明 |
| :-- | :-- | :-- | :-- | :-- |
| `pickerType` | `both`, (中文(简体) ), `calendar`, (中文(简体) ), `timer` | 可选 | `both` | 设定日期时间拾取器的类型 . `both`: 显示日历和计时器, `calendar`: 只显示日历, `timer`:只有显示计时器. |
| `pickerMode` | `popup`, (中文(简体) ), `dialog` | 可选 | `popup` | 选手的风格会打开. |
| `startView` | `month`, (中文(简体) ), `year`, (中文(简体) ), `multi-year` | 可选 | `month` | 关于日历应该开始的观点. |
| `startAt` | 吨/吨 | 可选 | `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`

| 活动 | 参数 | 说明 |
| :-- | :-- | :-- |
| `afterPickerOpen` | 无效 | 打开拾取器时召回引用 |
| `afterPickerClosed` | 无效 | 采取者闭口后召回引出. |
| `yearSelected` | T级 | 选择年份时召回引用 。 这并不意味着选定日期有所改变. |
| `monthSelected` | T级 | 选定月份时调用以引用 。 这并不意味着选定日期有所改变. |

## 属性 `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` | 打开拾取器开始的时刻. |
| `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)。 。 。 .

## 依赖关系

无

## 演示

-   在线医生 [这里](https://daniel-projects.firebaseapp.com/owlng/date-time-picker)
-   在线演示( StackBlitz) 是 [这里](https://stackblitz.com/github/DanielYKPan/owl-examples/tree/date-time-picker)

## 许可证

-   许可证:麻省理工学院

## 作者

**丹尼尔·Y克·潘**

## 常见问题

### @busacca/ng-pick-datetime 是什么？

角约会时间拾取器

### 如何安装 @busacca/ng-pick-datetime？

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

### @busacca/ng-pick-datetime 支持 TypeScript 吗？

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

### @busacca/ng-pick-datetime 支持 ESM 还是 CommonJS？

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

### @busacca/ng-pick-datetime 可以商用吗？

@busacca/ng-pick-datetime 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @busacca/ng-pick-datetime 的下载量有多少？

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

### @busacca/ng-pick-datetime 还在维护吗？

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