跳过内容

开始使用

GitHub

您可以使用我们的 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-picker
npx cap sync
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 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',
},
});
选项描述
modedate, time, dateAndTime, yearAndMonth, countDownTimerrange.
date初始选中值
min / max最小和最大可选择值。
format输出格式。支持 ISO、Java/Unicode 和常见 Moment 风格的格式。
title对话标题。
locale本地选择器支持的地区。
timezone用于解析和格式化的时区。
is24h优先使用 24 小时时间。
minuteStep时间选择器分钟间隔。
doneText / cancelText自定义操作标签。

仓库包含一个 Capacitor 示例应用,它打开了本机日期选择器、时间选择器、范围选择器和插件版本调用。 hide()示例应用

iOSAndroid
动态 iOS demo:@capgo/capacitor-date-picker 打开、选择日期并关闭动态 Android demo:@capgo/capacitor-date-picker 打开、选择日期并关闭

API 参考文档

《API 参考文档》

API 的完整参考文档保存在包 README 和 TypeScript 定义中: