# @capacitor-community/date-picker 中文文档 规范地址：https://npmcn.com/package/%40capacitor-community/date-picker/ 版本：7\.1\.0 npm 元数据更新时间：2026-10-23T21:47:45.443Z 中文译文更新时间：2026-11-09T04:28:08.925Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40capacitor-community/date-picker 原文对照：https://npmcn.com/package/%40capacitor-community/date-picker/?lang=original 项目主页：https://github.com/capacitor-community/date-picker#readme 源码仓库：https://github.com/capacitor-community/date-picker ## 关键信息（来自 npm 元数据） - 包体积（解压后）：78.8 kB，34 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：@capacitor/core \>=7\.0\.0 - 首次发布：2020-06-28T08:10:45.194Z - 最新版本发布：2025-09-12T12:12:00.629Z - 近 30 天下载量：22312（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：15（近 12 个月 0 个） ## 中文简介 Capacitor Apps 本地日期时间拾取器插件 ## 安装 ```sh npm install @capacitor-community/date-picker ``` 也可以使用：`pnpm add @capacitor-community/date-picker`、`yarn add @capacitor-community/date-picker`、`bun add @capacitor-community/date-picker` ## README ![](https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png) ### 约会拾取器 **`@capacitor-community/date-picker`** 本地 Date Picker 的电容社区插件 ![](https://img.shields.io/maintenance/yes/2025?style=flat-square) [![](https://img.shields.io/npm/l/@capacitor-community/date-picker?style=flat-square)](https://www.npmjs.com/package/@capacitor-community/date-picker) [![](https://img.shields.io/npm/dw/@capacitor-community/date-picker?style=flat-square)](https://www.npmjs.com/package/@capacitor-community/date-picker) [![](https://img.shields.io/npm/v/@capacitor-community/date-picker?style=flat-square)](https://www.npmjs.com/package/@capacitor-community/date-picker) [![](https://img.shields.io/badge/all%20contributors-6-orange?style=flat-square)](https://npmcn.com/package/%40capacitor-community/date-picker/#readme-contributors) ## 维护者 | 维护者 | GitHub 图像 | 社会 | | --- | --- | --- | | 斯特万·席尔瓦 | [炖鱼](https://github.com/stewones) | [@stewones (英语)](https://twitter.com/stewones) | | 丹尼尔·佩雷拉 | [丹尼尔·普拉泽韦多](https://github.com/danielprrazevedo) | [@ 丹丹普尔](https://twitter.com/DandanPrr) | ## 通知 我们从一个正式的Ong开始 如果您使用上一个 npm 软件包 `capacitor-datepick`请更新您的软件包 `@capacitor-community/date-picker`检查 [更改日志](https://npmcn.com/CHANGELOG.md) 需要更多信息. ## 安装 使用 npm : ```bash npm install @capacitor-community/date-picker ``` 使用线条 : ```bash yarn add @capacitor-community/date-picker ``` 同步本地文件 : ```bash npx cap sync ``` ## 升级指南 从 `2.*` 改为 `3.*` 我们有一些新的设置. 你可以看到在 [定义](https://npmcn.com/src/definitions.ts) 档案,我们有部分 `ios` 财务报告和审定财务报表 `android`。您必须修改格式配置为 `ios` 财务报告和审定财务报表 `android` 相会相会. # 这很重要! 为了保持社区插件的一致性,我们更改了插件所在变量的名称. 当我们在电容器插件输入生态系统时, 我们觉得这是一个很好的机会 在使用插件之前, 您需要像这样导入 ```ts import '@capacitor-community/date-picker'; import { Plugins } from '@capacitor/core'; const { DatePickerPlugin } = Plugins; ``` 现在,我们没有 `Plugins` 变量,我们不注册 `DatePickerPlugin` 内 `Capacitor.Plugins` 要使用此插件 . 现在, 要使用这个插件, 您需要这样做 ```ts import { DatePicker } from '@capacitor-community/date-picker'; ``` 你需要替换所有代码 你也得遵守机器人指南. ## 路线图 ### 欧斯 - [x] 当前 - [x] 配置 - [x] 样式 - [x] 格式 - [x] 语言 - [x] 日期 - [x] 模式 - [x] 主题 - [x] 时区 - [x] 分钟 - [x] 最大数 - [x] 已完成文本 - [x] 取消文本 - [x] 24小时 - [x] 标题 - [x] 标题Bg 颜色 - [x] bg 颜色 - [x] 字体颜色 - [x] 按钮Bg 颜色 - [x] 按钮颜色 - [x] 合并日期和时间 ### 机器人 - [x] 当前 - [x] 配置 - [x] 格式 - [x] 语言 - [x] 日期 - [x] 模式 - [x] 主题 - [x] 时区 - [x] 分钟 - [x] 最大数 - [x] 已完成文本 - [x] 取消文本 - [x] 24小时 ### 网络 - [ ] 当前 - [ ] 配置 - [ ] 格式 - [ ] 语言 - [ ] 模式 - [ ] 主题 - [ ] 背景情况 - [ ] 分钟 - [ ] 最大数 - [ ] 已完成文本 - [ ] 取消文本 - [ ] 时区 - [ ] 标题 ## API 密码 - `present(DatePickerOptions): Promise<{ value:string }>` ### IOS 配置( R)`DatePickerOptions`(中文(简体) ) 这些选项可以通过 `present` 方法和/或内部 `capacitor.config.json` | 名称 | 类型 | 默认 | | --- | --- | --- | | 格式 | `string` | `"yyyy-MM-dd'T'HH:mm:ss.sssZ"` | | 样式 | `string` | 如果iOS 14,则 `"inline"` 仅限 `"wheels"` | | 语言 | `string` | **_`current device`_** | | 日期 | `string` | **_`current date`_** | | 模式 | `DatePickerMode` | `"dateAndTime"` | | 主题 | `DatePickerTheme` | **_`current device`_** | | 时区 | `string` | **_`current device`_** | | 分钟 | `string` | `null` | | 最大数 | `string` | `null` | | 已完成文本 | `string` | `"OK"` | | 取消文本 | `string` | `"Cancel"` | | 24小时 | `boolean` | `false` | | 标题 | `string` | `null` | | 标题Bg 颜色 | `string` | `null` | | bg 颜色 | `string` | `null` | | 字体颜色 | `string` | `null` | | 按钮Bg 颜色 | `string` | `null` | | 按钮颜色 | `string` | `null` | ### Android 配置( R)`DatePickerOptions`(中文(简体) ) 这些选项可以通过 `present` 方法和/或内部 `capacitor.config.json` | 名称 | 类型 | 默认 | | --- | --- | --- | | 格式 | `string` | `"yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"` | | 语言 | `string` | **_`current device`_** | | 日期 | `string` | **_`current date`_** | | 模式 | `DatePickerMode` | `"dateAndTime"` | | 主题 | `DatePickerTheme` | `"light"` | | 时区 | `string` | **_`current device`_** | | 分钟 | `string` | `null` | | 最大数 | `string` | `null` | | 已完成文本 | `string` | `"OK"` | | 取消文本 | `string` | `"Cancel"` | | 24小时 | `boolean` | `false` | > 更多信息请检查 [`definitions`](https://npmcn.com/src/definitions.ts) 文件 ## 日期格式 对于格式,我们定义了旧的配置 贬值,因为我们有不一致的Android和iOS平台 现在您需要定义您的forma配置 `android.format` 财务报告和审定财务报表 `ios.format` ### iOS系统 对于iOS格式,您需要遵循此格式 [文档](https://developer.apple.com/documentation/foundation/dateformatter) ### 机器人 对于Android格式,您需要遵循此格式 [文档](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) ## Android 主题 您可以通过资源样式检查定义您的个性化主题 [示例应用程序](https://npmcn.com/example/android/app/src/main/res/values/styles.xml#L27) 您如何以实例来看待, 只需在全球资产中定义您的拾取器主题 您的应用程序并发送到 `android.theme` 在您的电容. config 文件中的道具 `options.android.theme` 现职. ## 演示 ![](https://npmcn.com/package/%40capacitor-community/date-picker/demo-android.gif) ![](https://npmcn.com/package/%40capacitor-community/date-picker/demo-ios.gif) ## 使用量 ```js import { DatePicker } from '@capacitor-community/date-picker'; import type { DatePickerTheme } from '@capacitor-community/date-picker/src'; const selectedTheme: DatePickerTheme = 'light'; DatePicker.present({ mode: 'date', locale: 'pt_BR', date: '13/07/2019', theme: selectedTheme, ios: { format: 'dd/MM/yyyy', }, android: { format: 'dd/MM/yyyy', }, }).then(date => alert(date.value)); ``` ### 控制器配置 ```json { //... "plugins": { "DatePickerPlugin": { "mode": "date", "locale": "pt_BR", "current": "13/07/2019", "format": "dd/MM/yyyy", "android": { "theme": "MyCustomeTheme" }, "ios": { "style": "wheels" } } } } ``` ## iOS 设置 - `ionic start my-cap-app --capacitor` - `cd my-cap-app` - `npm install --save @capacitor-community/date-picker` - `mkdir www && touch www/index.html` - `sudo gem install cocoapods` (仅一次) - `npx cap add ios` - `npx cap sync ios` (每次你跑动) `npm install`(中文(简体) ) - `npx cap open ios` > 提示:每次您更改本地代码时, 您可能需要清理缓存( Product > Clean building文件夹) , 然后再次运行应用程序 . ## 机器人设置 - `ionic start my-cap-app --capacitor` - `cd my-cap-app` - `npm install --save @capacitor-community/date-picker` - `mkdir www && touch www/index.html` - `npx cap add android` - `npx cap sync android` (每次你跑动) `npm install`(中文(简体) ) - `npx cap open android` 现在你该走了 尝试使用 `ionic cap run android --livereload --address=0.0.0.0`。 。 。 . > 提示:每次您更改本地代码, 您可能需要清理缓存( Build > Clean Project QQ Build > Rebuilt Project) , 然后再次运行应用程序 . ## 更新 对于已有的项目, 您可以使用此单项命令升级所有与电容器相关的软件包( 包括此插件) `npx npm-upgrade '*capacitor*' && npm install` ## 示例 [https://github.com/concessor-community/date-picker/tree/master/example 互联网档案馆的存檔,存档日期2013-12-11](https://github.com/capacitor-community/date-picker/tree/master/example) ## 许可证 麻省理工学院 ## 贡献者 感谢这些伟大的人[emoji 密钥](https://allcontributors.org/docs/en/emoji-key):
Stew
缝
💻 📖		Daniel Pereira
丹尼尔·佩雷拉
💻 📖 🚧		Caroline Oliva
卡罗琳·奥利瓦
💻		jcesarmobile
jcesarmobile 移动
💻		Valentin
瓦伦汀
💻		Jordi De Pau
乔迪·德波
⚠️
本项目遵循 [全部贡献者](https://github.com/all-contributors/all-contributors) 规格。 任何捐款都欢迎! ## 常见问题 ### @capacitor-community/date-picker 是什么？ Capacitor Apps 本地日期时间拾取器插件 ### 如何安装 @capacitor-community/date-picker？ 在项目目录运行 npm install @capacitor-community/date-picker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@capacitor/core（\>=7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @capacitor-community/date-picker 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @capacitor-community/date-picker 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @capacitor-community/date-picker 可以商用吗？ @capacitor-community/date-picker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @capacitor-community/date-picker 的下载量有多少？ 根据 npm 官方下载统计，@capacitor-community/date-picker 在 2026/10/09 – 2026/11/07 这 30 天内被下载 22,312 次，日均约 744 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @capacitor-community/date-picker 还在维护吗？ 最新版本 7\.1\.0 发布于 2025/09/12（1\.2 年前）；至今共发布 15 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/06/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。