@ capgo/ 电容- 日期选择器

在 iOS 和 Android 上显示您 Capacitor app 的本地日期和时间选择器, 并附带网络回落 。 取出日期,时间,年份和月份,或一个日期范围,有一个呼叫.

🤖 建筑与AI编码代理? 安装 Capgo 技能 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 @capgo/capacitor-date-picker 在您的电容应用程序中: npx skills add Cap-go/capgo-skills。然后问你的经纪人: 添加@capgo/capor-date-picker到我的Capacitor应用程序上,并把它接通 代理设置指南 • 妇女 主机磁共振

主要特点

• 拾取模式数字 : date, (中文(简体) ), time, (中文(简体) ), dateAndTime, (中文(简体) ), countDownTimer, (中文(简体) ), yearAndMonth (iOS和网络)和 range。 。 。 .
• 范围选择数字 : presentRange() 返回开始和结束日期.
• 自定义数字 : locale,轻或暗 theme,以及 minuteStep 为时间选择者.
• 控制权数字 : present() 打开拾取器 hide() 关闭它.
• 平台: iOS,Android和Web. 互联网档案馆的存檔,存档日期2013-12-02. iOS和Android上的原生采取器,浏览器在网络上回落.

原生日期,时间,日期-时间,年份-月,以及iOS,Android和Web上的Capacitor 8的测距取器.

这是Capgo维持的替代方案 @capacitor-community/date-picker. 主要区别在于维护速度:我们聆听社区报告,快速解决问题,以及船只更新,而不是留下长期存在的GitHub问题.

我们的固定

• 电容8支持.
• 使用相同的网络 present() API (英语).
• 程序化 hide()。 。 。 .
• 对话框标题支持 .
• iOS旋转安全布局.
• iOS 本地化日/月标签的本地化处理 .
• iOS系统 yearAndMonth 模式.
• 没有 iOS 强制在无效的日期崩溃 .
• ISO, Java/ Unicode, 以及常见的 Moment 风格格式, 如 : YYYY-MM-DD。 。 。 .
• 仅限日期的时区处理没有一天的班次.
• iOS系统 min 财务报告和审定财务报表 max 用 ISO 字符串解析 .
• 机器人筑巢 android 选项.
• 机器人 is24h。 。 。 .
• Android Date AndTime在移动到时间时保留所选择的日期.
• Android 对话框宽度/放出处理 .
• Android UI- Thread 对话框正在处理, 因此本地对话框从 Capacitor 调用中可靠打开 .
• 计时器的分钟步骤.
• 通过 presentRange()。 。 。 .

演示

iOS系统	机器人

截图

iOS系统	机器人

安装

您可以使用我们的 AI 辅助设置安装插件 。 使用以下命令将 Capgo 技能添加到您的 AI 工具 :

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

然后使用下列提示:

Use the `capacitor-plugins` skill from `cap-go/capacitor-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 a date',
});

console.log(result.value);

const time = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
});

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

平台说明

• iOS 用途 UIDatePicker 使用自动布局使拾取者在屏幕旋转中存活下来.
• Android 使用平台 DatePickerDialog 财务报告和审定财务报表 TimePickerDialog; 范围选择是两个本地日期选择.
• Web在小型模式包装上使用本地浏览器输入.
• minuteStep 被四舍五入到iOS上平台支持的间隔.

API 密码

• present(...)
• presentRange(...)
• hide()
• getPluginVersion()
• 接口
• 类型异名

当前(...)

present(options?: DatePickerOptions | undefined) => Promise<DatePickerResult>

呈取枣者.

回返情况: Promise<DatePickerResult>

当前区域(...)

presentRange(options?: DatePickerRangeOptions | undefined) => Promise<DatePickerRangeResult>

呈现出一个取地者。 土著平台使用两个土著日期选择; 网页在一个对话框中显示始末控件.

回返情况: Promise<DatePickerRangeResult>

隐藏( c)

hide() => Promise<void>

关闭当前可见的拾取器, 如果有的话 .

获取 PluginVersion ()

getPluginVersion() => Promise<PluginVersionResult>

返回平台执行版本标记 .

回返情况: Promise<PluginVersionResult>

接口

日期选择结果

日期选择选项

日期选择

日期选择Android 选项

日期选择区域结果

日期选择选项

插件变压器

类型异名

日期缩写

'wheels' | 'inline' | 'compact' | 'automatic'

日期选择器主题

'light' | 'dark' | string