开始使用
复制安装步骤和完整的 Markdown 指南。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
安装
标题为“安装”您可以使用我们的 AI 助手设置来安装插件。使用以下命令将 Capgo 技能添加到您的 AI 工具中:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins然后使用以下提示:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.如果您更喜欢手动设置,请运行以下命令安装插件并按照以下平台特定的说明进行操作:
npm install @capgo/capacitor-date-pickernpx cap syncimport { 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 date',});
console.log(result.value);选择时间
标题:选择时间const result = await DatePicker.present({ mode: 'time', is24h: true, minuteStep: 15, format: 'HH:mm', title: 'Select time',});
console.log(result.value);选择日期和时间
标题:选择日期和时间const result = await DatePicker.present({ mode: 'dateAndTime', date: '2026-05-27T14:30:00', format: "yyyy-MM-dd'T'HH:mm:ss", title: 'Select date and time',});选择一个月
标题:选择一个月const result = await DatePicker.present({ mode: 'yearAndMonth', date: '2026-05-01', format: 'yyyy-MM', title: 'Select month',});选择一个范围
标题:选择一个范围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, range.value);隐藏选择器
标题:隐藏选择器await DatePicker.hide();平台选项
标题:平台选项await DatePicker.present({ mode: 'date', date: '2026-05-27', title: 'Select date', ios: { style: 'inline', theme: 'light', }, android: { theme: 'light', },});常用选项
标题:常用选项| 选项 | 描述 |
|---|---|
mode | date, time, dateAndTime, yearAndMonth, countDownTimer或 range. |
date | 初始选中值 |
min / max | 最小和最大可选择值。 |
format | 输出格式。支持 ISO、Java/Unicode 和常见 Moment 风格的格式。 |
title | 对话标题。 |
locale | 本地选择器支持的地区。 |
timezone | 用于解析和格式化的时区。 |
is24h | 优先使用 24 小时时间。 |
minuteStep | 时间选择器分钟间隔。 |
doneText / cancelText | 自定义操作标签。 |
示例应用
名为“示例应用”的部分。仓库包含一个 Capacitor 示例应用,它打开了本机日期选择器、时间选择器、范围选择器和插件版本调用。 hide()示例应用
| iOS | Android |
|---|---|
![]() | ![]() |
API 参考文档
《API 参考文档》API 的完整参考文档保存在包 README 和 TypeScript 定义中:

