约会拾取器

@capacitor-community/date-picker

本地 Date Picker 的电容社区插件

维护者

通知

我们从一个正式的Ong开始 如果您使用上一个 npm 软件包 capacitor-datepick请更新您的软件包 @capacitor-community/date-picker检查 更改日志 需要更多信息.

安装

使用 npm :

npm install @capacitor-community/date-picker

使用线条 :

yarn add @capacitor-community/date-picker

同步本地文件 :

npx cap sync

升级指南

从 2.* 改为 3.* 我们有一些新的设置. 你可以看到在 定义 档案,我们有部分 ios 财务报告和审定财务报表 android。您必须修改格式配置为 ios 财务报告和审定财务报表 android 相会相会.

这很重要!

为了保持社区插件的一致性,我们更改了插件所在变量的名称. 当我们在电容器插件输入生态系统时, 我们觉得这是一个很好的机会

在使用插件之前, 您需要像这样导入

import '@capacitor-community/date-picker';
import { Plugins } from '@capacitor/core';
const { DatePickerPlugin } = Plugins;

现在,我们没有 Plugins 变量,我们不注册 DatePickerPlugin 内 Capacitor.Plugins 要使用此插件 .

现在, 要使用这个插件, 您需要这样做

import { DatePicker } from '@capacitor-community/date-picker';

你需要替换所有代码

你也得遵守机器人指南.

路线图

欧斯

• 当前
• 配置
  • 样式
  • 格式
  • 语言
  • 日期
  • 模式
  • 主题
  • 时区
  • 分钟
  • 最大数
  • 已完成文本
  • 取消文本
  • 24小时
  • 标题
  • 标题Bg 颜色
  • bg 颜色
  • 字体颜色
  • 按钮Bg 颜色
  • 按钮颜色
  • 合并日期和时间

机器人

• 当前
• 配置
  • 格式
  • 语言
  • 日期
  • 模式
  • 主题
  • 时区
  • 分钟
  • 最大数
  • 已完成文本
  • 取消文本
  • 24小时

网络

• 当前
• 配置
  • 格式
  • 语言
  • 模式
  • 主题
  • 背景情况
  • 分钟
  • 最大数
  • 已完成文本
  • 取消文本
  • 时区
  • 标题

API 密码

• present(DatePickerOptions): Promise<{ value:string }>

IOS 配置( R)DatePickerOptions(中文(简体) )

这些选项可以通过 present 方法和/或内部 capacitor.config.json

Android 配置( R)DatePickerOptions(中文(简体) )

这些选项可以通过 present 方法和/或内部 capacitor.config.json

更多信息请检查 definitions 文件

日期格式

对于格式,我们定义了旧的配置 贬值,因为我们有不一致的Android和iOS平台

现在您需要定义您的forma配置 android.format 财务报告和审定财务报表 ios.format

iOS系统

对于iOS格式,您需要遵循此格式 文档

机器人

对于Android格式,您需要遵循此格式 文档

Android 主题

您可以通过资源样式检查定义您的个性化主题 示例应用程序

您如何以实例来看待, 只需在全球资产中定义您的拾取器主题 您的应用程序并发送到 android.theme 在您的电容. config 文件中的道具 options.android.theme 现职.

演示

使用量

import { DatePicker } from '@capacitor-community/date-picker';
import type { DatePickerTheme } from '@capacitor-community/date-picker/src';
const selectedTheme: DatePickerTheme = 'light';

DatePicker.present({
  mode: 'date',
  locale: 'pt_BR',
  date: '13/07/2019',
  theme: selectedTheme,
  ios: {
    format: 'dd/MM/yyyy',
  },
  android: {
    format: 'dd/MM/yyyy',
  },
}).then(date => alert(date.value));

控制器配置

{
  //...
  "plugins": {
    "DatePickerPlugin": {
      "mode": "date",
      "locale": "pt_BR",
      "current": "13/07/2019",
      "format": "dd/MM/yyyy",
      "android": {
        "theme": "MyCustomeTheme"
      },
      "ios": {
        "style": "wheels"
      }
    }
  }
}

iOS 设置

• ionic start my-cap-app --capacitor
• cd my-cap-app
• npm install --save @capacitor-community/date-picker
• mkdir www && touch www/index.html
• sudo gem install cocoapods (仅一次)
• npx cap add ios
• npx cap sync ios (每次你跑动) npm install(中文(简体) )
• npx cap open ios

提示:每次您更改本地代码时, 您可能需要清理缓存( Product > Clean building文件夹) , 然后再次运行应用程序 .

机器人设置

• ionic start my-cap-app --capacitor
• cd my-cap-app
• npm install --save @capacitor-community/date-picker
• mkdir www && touch www/index.html
• npx cap add android
• npx cap sync android (每次你跑动) npm install(中文(简体) )
• npx cap open android

现在你该走了 尝试使用 ionic cap run android --livereload --address=0.0.0.0。 。 。 .

提示:每次您更改本地代码, 您可能需要清理缓存( Build > Clean Project QQ Build > Rebuilt Project) , 然后再次运行应用程序 .

更新

对于已有的项目, 您可以使用此单项命令升级所有与电容器相关的软件包( 包括此插件)

npx npm-upgrade '*capacitor*' && npm install

示例

https://github.com/concessor-community/date-picker/tree/master/example 互联网档案馆的存檔,存档日期2013-12-11

许可证

麻省理工学院

贡献者

感谢这些伟大的人emoji 密钥:

缝 💻 📖

丹尼尔·佩雷拉 💻 📖 🚧

卡罗琳·奥利瓦 💻

jcesarmobile 移动 💻

瓦伦汀 💻

乔迪·德波 ⚠️

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!