日期选择器

使用 @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	iOS截图：@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-date-picker展示原生日期选择器

选择一个时间

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();

__CAPGO_KEEP_0__ 8支持

• Capacitor 8 support.
• Web implementation with the same present() API.
• 程序化 hide().
• 对话标题支持
• iOS旋转安全布局、地区处理和模式 yearAndMonth 更安全的日期解析和日期-时间区处理
• Android嵌套选项、对话布局处理和UI线程对话处理
• 分钟步数和日期范围选择 is24h全参考
• __CAPGO_KEEP_0__:

https://__CAPGO_KEEP_0__.com/Cap-go/__CAPGO_KEEP_1__-date-picker/

• GitHub: https://github.com/Cap-go/capacitor-date-picker/
• 文档: /docs/plugins/date-picker/