# @capgo/capacitor-date-picker 中文文档

规范地址：https://npmcn.com/package/%40capgo/capacitor-date-picker/

版本：8\.1\.14
npm 元数据更新时间：2026-10-15T05:31:35.477Z
中文译文更新时间：2026-11-09T03:13:33.621Z
软件包许可：MPL-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40capgo/capacitor-date-picker
原文对照：https://npmcn.com/package/%40capgo/capacitor-date-picker/?lang=original
项目主页：https://capgo.app/docs/plugins/date-picker/
源码仓库：https://github.com/Cap-go/capacitor-date-picker

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

- 包体积（解压后）：591 kB，37 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@capacitor/core \>=8\.0\.0
- 首次发布：2026-05-27T22:31:05.542Z
- 最新版本发布：2026-10-15T05:31:35.131Z
- 近 30 天下载量：56418（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

IOS,Android的原生Capacitor取日期器,并有针对长期社区问题的修补.

## 安装

```sh
npm install @capgo/capacitor-date-picker
```

也可以使用：`pnpm add @capgo/capacitor-date-picker`、`yarn add @capgo/capacitor-date-picker`、`bun add @capgo/capacitor-date-picker`

## README

# @ capgo/ 电容- 日期选择器

在 iOS 和 Android 上显示您 Capacitor app 的本地日期和时间选择器, 并附带网络回落 。 取出日期,时间,年份和月份,或一个日期范围,有一个呼叫.

[![Capgo - Build Capacitor apps with AI, ship updates instantly](https://capgo.app/readme-banner.svg?repo=Cap-go/capacitor-date-picker)](https://capgo.app/?ref=plugin_date_picker)

**队长**:在几分钟内将修正推给您的 Capacitor 用户,在没有Mac的情况下构建已签名的iOS和Android apps,并在一击中回滚.

## [\*免费开始\*](https://capgo.app/register/?ref=plugin_date_picker)

14天无限自由审判. 不需要信用卡

> 🤖 **建筑与AI编码代理?** 安装 [Capgo 技能](https://capgo.app/skills/?ref=plugin_date_picker) 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 `@capgo/capacitor-date-picker` 在您的电容应用程序中: `npx skills add Cap-go/capgo-skills`。然后问你的经纪人: _添加@capgo/capor-date-picker到我的Capacitor应用程序上,并把它接通_ [代理设置指南](https://capgo.app/agents/?ref=plugin_date_picker) • 妇女 [主机磁共振](https://capgo.app/docs/ai/mcp/?ref=plugin_date_picker)

![Animated iOS demo showing the native date picker opening, selecting a date, and closing](https://raw.githubusercontent.com/Cap-go/capacitor-date-picker/main/screenshots/demo/ios-date-picker-demo.webp)

## 主要特点

-   **拾取模式**数字 : `date`, (中文(简体) ), `time`, (中文(简体) ), `dateAndTime`, (中文(简体) ), `countDownTimer`, (中文(简体) ), `yearAndMonth` (iOS和网络)和 `range`。 。 。 .
-   **范围选择**数字 : `presentRange()` 返回开始和结束日期.
-   **自定义**数字 : `locale`,轻或暗 `theme`,以及 `minuteStep` 为时间选择者.
-   **控制权**数字 : `present()` 打开拾取器 `hide()` 关闭它.
-   **平台**: iOS,Android和Web. 互联网档案馆的存檔,存档日期2013-12-02. iOS和Android上的原生采取器,浏览器在网络上回落.

原生日期,时间,日期-时间,年份-月,以及iOS,Android和Web上的Capacitor 8的测距取器.

这是Capgo维持的替代方案 `@capacitor-community/date-picker`. 主要区别在于维护速度:我们聆听社区报告,快速解决问题,以及船只更新,而不是留下长期存在的GitHub问题.

## 我们的固定

-   电容8支持.
-   使用相同的网络 `present()` API (英语).
-   程序化 `hide()`。 。 。 .
-   对话框标题支持 .
-   iOS旋转安全布局.
-   iOS 本地化日/月标签的本地化处理 .
-   iOS系统 `yearAndMonth` 模式.
-   没有 iOS 强制在无效的日期崩溃 .
-   ISO, Java/ Unicode, 以及常见的 Moment 风格格式, 如 : `YYYY-MM-DD`。 。 。 .
-   仅限日期的时区处理没有一天的班次.
-   iOS系统 `min` 财务报告和审定财务报表 `max` 用 ISO 字符串解析 .
-   机器人筑巢 `android` 选项.
-   机器人 `is24h`。 。 。 .
-   Android Date AndTime在移动到时间时保留所选择的日期.
-   Android 对话框宽度/放出处理 .
-   Android UI- Thread 对话框正在处理, 因此本地对话框从 Capacitor 调用中可靠打开 .
-   计时器的分钟步骤.
-   通过 `presentRange()`。 。 。 .

## 演示

| iOS系统 | 机器人 |
| --- | --- |
| ![Animated iOS demo showing the native date picker opening, selecting a date, and closing](https://raw.githubusercontent.com/Cap-go/capacitor-date-picker/main/screenshots/demo/ios-date-picker-demo.webp) | ![Animated Android demo showing the native date picker opening, selecting a date, and closing](https://raw.githubusercontent.com/Cap-go/capacitor-date-picker/main/screenshots/demo/android-date-picker-demo.webp) |

## 截图

| iOS系统 | 机器人 |
| --- | --- |
| ![iOS native date picker](https://raw.githubusercontent.com/Cap-go/capacitor-date-picker/main/screenshots/ios-date-picker.png) | ![Android native date picker](https://raw.githubusercontent.com/Cap-go/capacitor-date-picker/main/screenshots/android-date-picker.png) |

## 安装

您可以使用我们的 AI 辅助设置安装插件 。 使用以下命令将 Capgo 技能添加到您的 AI 工具 :

```bash
npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins
```

然后使用下列提示:

```text
Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.
```

如果您更喜欢手动设置,请通过运行以下命令来安装插件,并遵循下面的平台特定指令:

```bash
npm install @capgo/capacitor-date-picker
npx cap sync
```

## 使用量

```ts
import { DatePicker } from '@capgo/capacitor-date-picker';

const result = await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  min: '2026-01-01',
  max: '2026-12-31',
  format: 'yyyy-MM-dd',
  title: 'Select a date',
});

console.log(result.value);
```

```ts
const time = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
});
```

```ts
const range = await DatePicker.presentRange({
  start: '2026-05-01',
  end: '2026-05-27',
  format: 'yyyy-MM-dd',
  startTitle: 'Start date',
  endTitle: 'End date',
});

console.log(range.start, range.end);
```

## 平台说明

-   iOS 用途 `UIDatePicker` 使用自动布局使拾取者在屏幕旋转中存活下来.
-   Android 使用平台 `DatePickerDialog` 财务报告和审定财务报表 `TimePickerDialog`; 范围选择是两个本地日期选择.
-   Web在小型模式包装上使用本地浏览器输入.
-   `minuteStep` 被四舍五入到iOS上平台支持的间隔.

## API 密码

-   [`present(...)`](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-present)
-   [`presentRange(...)`](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-presentrange)
-   [`hide()`](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-hide)
-   [`getPluginVersion()`](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-getpluginversion)
-   [接口](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-interfaces)
-   [类型异名](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-type-aliases)

### 当前(...)

```typescript
present(options?: DatePickerOptions | undefined) => Promise<DatePickerResult>
```

呈取枣者.

| 参数 | 类型 |
| --- | --- |
| **`options`** | `[DatePickerOptions](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickeroptions)` |

**回返情况:** `Promise<[DatePickerResult](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickerresult)>`

* * *

### 当前区域(...)

```typescript
presentRange(options?: DatePickerRangeOptions | undefined) => Promise<DatePickerRangeResult>
```

呈现出一个取地者。 土著平台使用两个土著日期选择; 网页在一个对话框中显示始末控件.

| 参数 | 类型 |
| --- | --- |
| **`options`** | `[DatePickerRangeOptions](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickerrangeoptions)` |

**回返情况:** `Promise<[DatePickerRangeResult](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickerrangeresult)>`

* * *

### 隐藏( c)

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

关闭当前可见的拾取器, 如果有的话 .

* * *

### 获取 PluginVersion ()

```typescript
getPluginVersion() => Promise<PluginVersionResult>
```

返回平台执行版本标记 .

**回返情况:** `Promise<[PluginVersionResult](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-pluginversionresult)>`

* * *

### 接口

#### 日期选择结果

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`value`** | `string | null` | 格式化值 。 Null表示拾取者被开除. |

#### 日期选择选项

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`min`** | `string` | 最小可选值 . |
| **`max`** | `string` | 最大可选值 . |
| **`date`** | `string` | 初始选中值 . |
| **`ios`** | `[DatePickerIosOptions](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickeriosoptions)` | 平台专用iOS选项凌驾于顶级选项. |
| **`android`** | `[DatePickerAndroidOptions](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickerandroidoptions)` | 平台专用Android选项凌驾于顶级选项之上. |

#### 日期选择

| Prop | 类型 | 说明 | 默认 |
| --- | --- | --- | --- |
| **`style`** | `[DatePickerIosStyle](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickeriosstyle)` | iOS采取器风格. | `"inline"` |
| **`titleFontColor`** | `string` |  |  |
| **`titleBgColor`** | `string` |  |  |
| **`bgColor`** | `string` |  |  |
| **`fontColor`** | `string` | IOS上的 picker文本颜色. 私人用途 `textColor` 支持时 KVC; 否则返回到 `tintColor` (只有accent,不能保证轮标文本). |  |
| **`buttonBgColor`** | `string` |  |  |
| **`buttonFontColor`** | `string` |  |  |
| **`mergedDateAndTime`** | `boolean` | 尽可能在一个 UIDatePicker 中显示日期和时间 . |  |

#### 日期选择Android 选项

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`theme`** | `[DatePickerTheme](https://npmcn.com/package/%40capgo/capacitor-date-picker/#readme-datepickertheme)` | Android 对话框主题资源名或内置主题密钥. |

#### 日期选择区域结果

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`start`** | `string | null` | 格式化起始值 。 Null表示拾取者被开除. |
| **`end`** | `string | null` | 格式化端值 。 Null表示拾取者被开除. |
| **`value`** | `string | null` | 选择两个日期时的“ 起始/ 结束” 值 . |

#### 日期选择选项

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`start`** | `string` | 初始范围起始值 . |
| **`end`** | `string` | 初始范围结束值 . |
| **`startTitle`** | `string` | 选择起始日期时使用的标题 . |
| **`endTitle`** | `string` | 选择结束日期时使用的标题 . |

#### 插件变压器

| Prop | 类型 |
| --- | --- |
| **`version`** | `string` |

### 类型异名

#### 日期缩写

`'wheels' | 'inline' | 'compact' | 'automatic'`

#### 日期选择器主题

`'light' | 'dark' | string`

## 常见问题

### @capgo/capacitor-date-picker 是什么？

IOS,Android的原生Capacitor取日期器,并有针对长期社区问题的修补\.

### 如何安装 @capgo/capacitor-date-picker？

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

### @capgo/capacitor-date-picker 支持 TypeScript 吗？

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

### @capgo/capacitor-date-picker 支持 ESM 还是 CommonJS？

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

### @capgo/capacitor-date-picker 可以商用吗？

@capgo/capacitor-date-picker 使用 MPL-2\.0 许可。弱 Copyleft：可以商用，也可以和闭源代码一起使用；但如果分发时修改了 MPL 授权的文件，这些文件的修改需以 MPL 开源。以上为概括，不构成法律意见，请以许可原文为准。

### @capgo/capacitor-date-picker 的下载量有多少？

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

### @capgo/capacitor-date-picker 还在维护吗？

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