使用 @capgo/capacitor-date-picker
@capgo/capacitor-date-picker 添加原生日期、时间、日期时间、年月和范围选择器到 Capacitor 应用程序中，支持 iOS 和 Android，Web fallback
这是 Capgo 的维护版本 @capacitor-community/date-picker我们倾听社区报告，快速修复问题并发布更新，而不是留下长期 GitHub 问题
安装
npm install @capgo/capacitor-date-picker
npx cap sync
原生选择器演示
| iOS | Android |
|---|---|
 |
 |
原生日期选择器截图
| iOS | Android |
|---|---|
 |
 |
选择日期
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',
});
选择日期范围
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);
关闭活动的日期选择器
await DatePicker.hide();
解决的问题
- Capacitor 8 支持。
- 与原生相同的 Web 实现。
present()API。 - 程序化
hide(). - 对话框标题支持。
- iOS 旋转安全布局、地区处理和模式。
yearAndMonthmode. - Android 嵌套选项、对话框布局处理和 UI 线程对话处理。
- 分钟步长和日期范围选择。
is24h全参考 - __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
- GitHub: https://github.com/Cap-go/capacitor-date-picker/
- 文档：/docs/plugins/date-picker/