# @capawesome-team/capacitor-datetime-picker 中文文档

规范地址：https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/

版本：8\.2\.0
npm 元数据更新时间：2026-10-01T11:39:20.929Z
中文译文更新时间：2026-11-09T04:37:51.162Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40capawesome-team/capacitor-datetime-picker
原文对照：https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/?lang=original
项目主页：https://capawesome.io/docs/sdks/capacitor/datetime-picker/
源码仓库：https://github.com/capawesome-team/capacitor-plugins

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

- 包体积（解压后）：137 kB，44 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@capacitor/core \>=8\.0\.0
- 首次发布：2023-03-19T13:02:53.296Z
- 最新版本发布：2026-10-01T11:39:20.627Z
- 近 30 天下载量：17844（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 10 个）

## 中文简介

让用户在Android和iOS上轻松输入日期和时间的Capacitor插件.

## 安装

```sh
npm install @capawesome-team/capacitor-datetime-picker
```

也可以使用：`pnpm add @capawesome-team/capacitor-datetime-picker`、`yarn add @capawesome-team/capacitor-datetime-picker`、`bun add @capawesome-team/capacitor-datetime-picker`

## README

# 剪接器插件

用于无缝日期和时间选择的Capacitor插件,具有本地化,主题化等高级特性,并具有更多. 可供Android和iOS使用.

[![Deliver Live Updates to your Capacitor app with Capawesome Cloud](https://cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png?t=1)](https://cloud.capawesome.io/)

## 特征

Capacitor Datetime Picker插件是Capacitor apps最富特色的日期和时间选择解决方案之一. 以下是一些关键特征:

-   🖥️ **跨平台**: 支持Android和iOS.
-   📅 **多种模式**:日期、时间、日期和取月模式.
-   🌍 **本地化**:支持BCP 47语言标记.
-   🎨 **他们**:自动,光线,和暗主题支持.
-   ⚡ **自定义格式**: 定义自己的日期/时间格式字符串.
-   🔒 **最小/最大限制**: 设置最小和最大可选日期/时间.
-   📱 **本地用户界面**: 使用月台专用取取器组件.
-   ⚙️ **灵活配置**: 自定义按钮文本和拾取模式.
-   🤝 **兼容性**: 与 [行动表](https://capawesome.io/docs/sdks/capacitor/action-sheet/), (中文(简体) ), [对话框](https://capawesome.io/docs/sdks/capacitor/dialog/) 财务报告和审定财务报表 [本地化](https://capawesome.io/docs/sdks/capacitor/localization/) 插件 .
-   🔁 **最新数据**:总是支持最新的Capacitor版本.

缺少一个功能? 刚刚 [打开一个问题](https://github.com/capawesome-team/capacitor-plugins/issues) 我们看看!

## 使用大小写

当应用程序需要用户输入日期或时间时,通常会使用Datetime Picker插件,例如:

-   **预约**:让用户选择保留的日期和时间,在最小和最大限制的情况下限制选择.
-   **配置表单**:询问出生日期与本地,本地取枣.
-   **提醒和警报**:让用户使用本地取时器选择一天的时间,在iOS上可选择自定义分钟间隔.
-   **报告和声明**: 让用户只选择一个月和一年, 例如过滤月报, 使用 `month` 模式.

## 兼容性

| 插件版本 | 电容版本 | 状态 |
| --- | --- | --- |
| 8.x.x (英语) | \>=8.x.x | 积极支持 |
| 7.x.x (中文(简体) ) | 7.x.x (中文(简体) ) | 折旧 |
| 6.x.x (中文(简体) ) | 6.x.x (中文(简体) ) | 折旧 |
| 5.x.x (中文(简体) ) | 5.x.x (中文(简体) ) | 折旧 |

## 安装

你可以用我们的 **AI 辅助设置** 以安装插件. 添加数据 [超级技能](https://github.com/capawesome-team/skills) 至您的 AI 工具,使用以下命令:

```bash
npx skills add capawesome-team/skills --skill capacitor-plugins
```

然后使用下列提示:

```
Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome-team/capacitor-datetime-picker` plugin in my project.
```

如果你喜欢 **手动设置**,通过运行下列命令来安装插件:

```bash
npm install @capawesome-team/capacitor-datetime-picker
npx cap sync
```

## 配置

此插件不需要配置 .

## 演示

这里有一个实例: [robingenz/电容器-插管-demo](https://github.com/robingenz/capacitor-plugin-demo)

| 机器人 | iOS系统 |
| --- | --- |
| ![Android Demo](https://user-images.githubusercontent.com/13857929/184545710-a837f45f-e335-4903-b3a9-e1f30b42163f.gif) | ![iOS Demo](https://raw.githubusercontent.com/capawesome-team/capacitor-plugins/main/packages/datetime-picker/assets/datetime-picker-demo-ios.png) |

## 使用量

以下例子说明如何呈现取出日期,时间,或取出日期的时间,以及如何让用户只取出一个月和一年.

### 呈现日期、时间或日期取取器

打开本地取取器 `present(...)` 方法。 使用 `mode` 选项,在日期、时间或日期时间拾取器之间选择,并根据需要自定义主题、地方和按钮文本。 仅在Android和iOS上提供:

```typescript
import { DatetimePicker } from '@capawesome-team/capacitor-datetime-picker';

const present = async () => {
  const date = new Date('1995-12-24T02:23:00');

  const { value } = await DatetimePicker.present({
    cancelButtonText: 'Cancel',
    doneButtonText: 'Ok',
    mode: 'time',
    value: date.toISOString(),
    theme: 'dark',
    locale: 'en-US',
  });

  return value;
};
```

### 让用户只选择一个月一年

使用 `month` 模式让用户选择没有一天或时间的月份和年份,例如过滤月度报告。 返回的值是选定月份的第一天 :

```typescript
import { DatetimePicker } from '@capawesome-team/capacitor-datetime-picker';

const presentMonth = async () => {
  const { value } = await DatetimePicker.present({
    cancelButtonText: 'Cancel',
    doneButtonText: 'Ok',
    mode: 'month',
    value: '2026-05',
    format: 'yyyy-MM',
    locale: 'en-US',
  });

  return value;
};
```

## API 密码

-   [`present(...)`](https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/#readme-present)
-   [`cancel()`](https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/#readme-cancel)
-   [接口](https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/#readme-interfaces)

### 当前(...)

```typescript
present(options?: PresentOptions | undefined) => Promise<PresentResult>
```

打开取日期器.

如果输入被用户取消或解禁,则会出现错误.

在Android上,拾取者被解雇(承诺与 `dismissed` 错误代码),如果系统语言,字体大小或布局方向在打开时发生变化.

仅在Android和iOS上提供.

| 参数 | 类型 |
| --- | --- |
| **`options`** | `[PresentOptions](https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/#readme-presentoptions)` |

**回返情况:** `Promise<[PresentResult](https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/#readme-presentresult)>`

**自:** 0.0.1 资源

* * *

### 取消( )

```typescript
cancel() => Promise<void>
```

取消当前活动的日期时间拾取器 .

如果没有活取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.

仅在Android和iOS上提供.

**自:** 7.2.0 联合国

* * *

### 接口

#### 现成

| Prop | 类型 | 说明 | 自兹 |
| --- | --- | --- | --- |
| **`value`** | `string` | 用户输入的值 。 此值的格式符合 `format` 参数. | 0.0.1 资源 |

#### 当前选项

| Prop | 类型 | 说明 | 默认 | 自兹 |
| --- | --- | --- | --- | --- |
| **`cancelButtonText`** | `string` | 取消按钮文本 . | `'Cancel'` | 0.0.1 资源 |
| **`doneButtonText`** | `string` | 完成的按钮文本 . | `'Ok'` | 0.0.1 资源 |
| **`format`** | `string` | 接收和返回值的格式. | `'yyyy-MM-dd'T'HH:mm:ss.sss'Z''` | 0.0.1 资源 |
| **`locale`** | `string` | BCP 47语言标记来定义UI的语言. |  | 0.0.2 (中文(简体) ) |
| **`max`** | `string` | 最近的日期和时间 此值的格式必须与 `format` 参数。 此值必须晚于或等同于指定日期字符串 `min` 属性. |  | 0.0.1 资源 |
| **`min`** | `string` | 最早的日期和时间接受. 此值的格式必须与 `format` 参数。 此值必须比指定的日期要早或等于 `max` 属性. |  | 0.0.1 资源 |
| **`mode`** | `'date' | 'time' | 'datetime' | 'month'` | 无论是日期,时间,日期时间还是取月器. 这个 `month` 模式(自 `8.1.0`)让用户只选择一个月又一年. 与其他模式不同,它在两个平台上都使用自定义(非本土)的UI,因为Android和iOS都没有提供本土的月取器. 返回的值为选定月份的第一天: 00:00当地时间. | `'datetime'` | 0.0.1 资源 |
| **`theme`** | `'auto' | 'light' | 'dark'` | 选择日期拾取者应该有的主题 。 与 `auto` 系统主题被使用。 此值覆盖 `theme` 配置值 。 在iOS 26上和后期,取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 仅在Android和iOS上提供. 仅在Android上可用自旋器选项 |  | 0.0.1 资源 |
| **`value`** | `string` | 打开拾取器时的预定义值 。 此值的格式必须与 `format` 参数. |  | 0.0.1 资源 |
| **`androidTimePickerMode`** | `'clock' | 'spinner'` | 是否在Android上使用取时器的自旋器或时钟模式. 此值覆盖 `androidTimePickerMode` 配置值 。 只能从Android上找到. |  | 5.1.0 国家 |
| **`androidDatePickerMode`** | `'spinner' | 'calendar'` | 是否在Android上使用取日期器的日历或自旋模式 。 此值覆盖 `androidDatePickerMode` 配置值 。 只能从Android上找到. |  | 5.1.0 国家 |
| **`minuteInterval`** | `number` | 取出时间的分钟间隔. 这控制了分钟选择器的颗粒性(如:0分为15分,15分为30分为45分). 数值必须均匀地分割成60个. 仅在使用时间或日期模式时在iOS上可用. 在Android上,这个参数被忽略了. | `1` | 7.1.0 (中文(简体) ) |

## 财务问题

### 当用户取消拾取器时会发生什么?

这个 `present(...)` 如果输入被用户取消或删除,方法会丢出错误。 请在代码中抓取此错误, 例如要保留先前的值 .

### 如何在程序上关闭拾取器?

使用 `cancel()` 用于取消当前活动的日期时间拾取器的方法,例如当您的应用程序被发送到背景时。 如果没有活取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.

### 我如何限制用户可以选择的日期 ?

使用 `min` 财务报告和审定财务报表 `max` 选项 `present(...)` 用于定义最早和最近接受的日期和时间的方法。 两个值的格式必须匹配 `format` 参数.

### 我怎么能让用户只选择一个月一年呢?

设定 `mode` 选项到 `month`与其它模式不同,取月器在两个平台上都使用自定义(非自定义)的UI,因为Android和iOS都没有提供本土的取月器. 返回的值为选定月份的第一天: 00:00当地时间。 见 [使用示例](https://npmcn.com/package/%40capawesome-team/capacitor-datetime-picker/#readme-let-the-user-pick-a-month-and-year-only) 见上文.

### 我能改变选手的语言和主题吗?

是的,用那个 `locale` 选项,使用 BCP 47 语言标记来定义 UI 语言,以及 `theme` 选项 `auto`, (中文(简体) ), `light`,以及 `dark`与 `auto`,使用系统主题.

### 这个插件在网络上工作吗 ?

不,这个插件只在Android和iOS上可以使用,在那里它使用特定平台取取取器组件. 这个 `present(...)` 财务报告和审定财务报表 `cancel()` 方法不在网上提供.

## 相关插件

-   [行动表](https://capawesome.io/docs/sdks/capacitor/action-sheet/): 显示本地动作表.
-   [对话框](https://capawesome.io/docs/sdks/capacitor/dialog/): 显示本地提醒, 确认, 并提示对话框 .
-   [本地化](https://capawesome.io/docs/sdks/capacitor/localization/):读取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.
-   [选项拾取器](https://capawesome.io/docs/sdks/capacitor/option-picker/):让用户从列表中选择一个带有本地取取取器的选项.

## 贷项

此插件的 iOS 执行基于 [拉皮克尔](https://github.com/rheyansh/RPicker) 许可的 [麻省理工学院](https://github.com/rheyansh/RPicker/blob/master/LICENSE)。 。 。 .

## 通讯

随时更新有关卡帕韦索姆、Capacitor和Ionic生态系统的最新消息和最新消息,因为我们 [《卡帕索克通讯》](https://cloud.capawesome.io/newsletter/)。 。 。 .

## 更改日志

见 [变动情况](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/datetime-picker/CHANGELOG.md)。 。 。 .

## 许可证

见 [自由主义](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/datetime-picker/LICENSE)。 。 。 .

## 常见问题

### @capawesome-team/capacitor-datetime-picker 是什么？

让用户在Android和iOS上轻松输入日期和时间的Capacitor插件\.

### 如何安装 @capawesome-team/capacitor-datetime-picker？

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

### @capawesome-team/capacitor-datetime-picker 支持 TypeScript 吗？

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

### @capawesome-team/capacitor-datetime-picker 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @capawesome-team/capacitor-datetime-picker 可以商用吗？

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

### @capawesome-team/capacitor-datetime-picker 的下载量有多少？

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

### @capawesome-team/capacitor-datetime-picker 还在维护吗？

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