跳转到正文

@capgo/capacitor-date-picker

在 iOS、Android 和 Web 上展示原生日期、时间、范围及年月选择器。

present() 显示日期、时间或组合模式的平台选择器,支持 min、max 和格式化选项。 presentRange() 支持预订式的开始和结束日期选择。通过一个 TypeScript API 自定义 iOS 滚轮或内联样式,以及 Android Material 对话框。

典型适用场景:旅行预订、日程表单、出生日期采集,以及需要无障碍原生控件的筛选器。

平台支持备注
iOS是UIDatePicker 样式,包括滚轮和内联
Android是Material 日期和时间选择器
Web 端是插件中的备用选择器实现
iOSAndroid
@capgo/capacitor-date-picker 打开、选择日期并关闭的 iOS 动画演示@capgo/capacitor-date-picker 打开、选择日期并关闭的 Android 动画演示

应用截图

“截图”章节
iOSAndroid
@capgo/capacitor-date-picker 在 iOS 上的原生日期选择器截图@capgo/capacitor-date-picker 在 Android 上的原生日期选择器截图
  • 提供原生日期、时间、日期时间、年月以及倒计时风格的选择器。
  • 通过以下方式选择日期范围 presentRange().
  • 支持使用 ISO、Java/Unicode 以及常见的 Moment 风格模式格式化返回值。
  • 应用 min, max, date语言区域、时区和 24 小时制选项。
  • 根据需要使用特定于 iOS 和 Android 平台的配置项。
  • 以编程方式关闭当前打开的 picker: hide().
  • 支持 Capacitor 8。
  • Web 实现使用相同的 present() API。
  • 支持对话框标题。
  • iOS 旋转安全布局和 locale 处理。
  • iOS yearAndMonth 模式。
  • 更安全地解析无效日期、ISO 字符串、仅日期值以及 min / max.
  • Android 嵌套选项, is24h,对话框宽度处理,以及 UI 线程对话框处理。
  • 时间选择器的分钟步进。
  • 通过以下方式选择范围 presentRange().
功能iOSAndroidWeb 端
present()是是是
presentRange()是是是
hide()是是是
date 模式是是是
time 模式是是是
dateAndTime 模式是是是
yearAndMonth 模式是日期回退是
minuteStep是是是
方法描述
present显示用于选择单个值的原生或 Web 选择器。
presentRange显示日期范围选择器。原生平台使用两次原生选择;Web 端则同时显示开始和结束控件。
hide关闭当前可见的选择器(如果有)。
getPluginVersion获取平台实现的版本标记。

此参考文档同步自 src/definitions.ts 中的 capacitor-date-picker.