uni-app 解决钉钉小程序日期组件uni-datetime-picker不兼容ios问题

最近在使用uni-app开发 钉钉小程序 ,遇到一个ios的兼容性问题
uni-datetime-picker 组件在模拟器上可以使用,在真机上不生效问题

文章目录

    • 1. 不兼容的写法,`uni-datetime-picker 不兼容IOS`
    • 2. 兼容的写法,使用 `dd.datePicker` 实现。
    • 3. 实现效果,自测IOS可以兼容

1. 不兼容的写法,uni-datetime-picker 不兼容IOS

<uni-forms-item label="产生时间" required name="generateTime"><uni-datetime-picker class="custom-datetime-picker" :disabled="isDisabled"v-model="generate.generateTime" :clear-icon="false" :clear="false" />
</uni-forms-item>

2. 兼容的写法,使用 dd.datePicker 实现。

  1. 就是自定义一个 view 然后通过click事件触发dd.datePicker。
<uni-forms-item label="产生时间" required name="generateTime"><view @click="showPicker" class="datetime-picker"><uni-icons custom-prefix="custom-icon" class="icon-calendar" type="calendar" size="20" color="#c2c6cd"/>{{generate.generateTime || '请选择时间'}}</view>
</uni-forms-item>
methods: {// 点击弹窗日期窗口showPicker() {dd.datePicker({format: 'yyyy-MM-dd HH:mm:ss',// currentDate: '2012-12-12',success: (res) => {if (res) {this.generate.generateTime = res.date;}},});},
}
  1. 在优化一下自定义的日期组件的样式
.datetime-picker,.datetime-picker-placeholder{width: 100%;flex: 1;line-height: 1;font-size: 14px;height: 40px;display: flex;box-sizing: border-box;flex-direction: row;align-items: center;border: 1px solid #dcdfe6;border-radius: 4px;padding-left:3px;
}.icon-calendar{margin-right:2px;
}

3. 实现效果,自测IOS可以兼容

样式跟uni-ui的 uni-datetime-picker 组件样式一样。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/178997.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录 vue + vuetify + electron 安装过程

NodeJs 版本&#xff1a; 20 内容来自&#xff1a; Electron Vue.js Vuetify 构建跨平台应用_思月行云的博客-CSDN博客文章浏览阅读61次。Go coding!https://blog.csdn.net/kenkao/article/details/132600542 npm config set registry https://registry.npm.taobao.org np…

MongoDB——MongoDB删除系统自带的local数据库

一、MongoDB删除系统自带的local数据库 1.1、linux环境进入mongo客户端 输入 mongo 命令&#xff0c;进入命令行客户端 进入admin库&#xff0c;并登录&#xff0c;查看所有数据库 #进入admin库 use admin #并登录admin db.auth("username","password")…

【蓝桥杯】2023省赛H题

考察知识点&#xff1a;双向链表&#xff0c;小根堆 完整代码在文章末尾 题目 【问题描述】 给定一个长度为 N 的整数数列: A1,A2,...,AN。你要重复以下操作 K 次 :…

项目经理的三国时代,刘备与刘关张的项目计划

刘备在历史的洪流中抓住了“光复汉室”的战略机会&#xff0c;凭借他的身份和仁义&#xff0c;成功吸引了关羽和张飞两位团队成员。他们三人在桃园结下了深厚的情谊&#xff0c;标志着刘备规划已久的“光复汉室”项目正式启动。 然而&#xff0c;由于刘备在项目管理上的目标不…

[0xGame 2023 公开赛道] week4 crypto/pwn/rev

最后一周结束了&#xff0c;难度也很大&#xff0c;已经超出我这认为的新生程度了。 crypto Orac1e 先看题&#xff0c;题目先是给了加密过的flag然后提供不限次数的解密&#xff0c;不过仅提供解密后unpad的结果。 from Crypto.Util.number import * from Crypto.Cipher i…

Linux | 文件系统

目录 前言 一、预备知识 二、文件相关的系统调用 1、C语言的文件操作 2、系统调用接口 &#xff08;1&#xff09;open函数 &#xff08;2&#xff09;close函数 &#xff08;3&#xff09;write函数 &#xff08;4&#xff09;read函数 3、代码实操 三、深入理解文…

高浓度化工废水处理工艺是怎样的

高浓度化工废水处理工艺主要包括以下步骤&#xff1a; 预处理&#xff1a;通过物理、化学和生物等方法对废水进行预处理&#xff0c;以去除其中的悬浮物、油污、重金属等有害物质。常用的预处理方法包括沉淀、过滤、吸附、氧化等。化学氧化&#xff1a;利用氧化剂&#xff08;…

“没有酒瓶”的新春礼酒,泸州老窖的颠覆性之作

执笔 | 萧 萧 编辑 | 扬 灵 没有想到&#xff0c;新春礼酒还能跳出生肖酒造型桎梏&#xff0c;开创出“没有酒瓶的白酒”。 没有想到&#xff0c;即将要发布的新品就“藏”在每一位参会者都触手可及的餐桌正中。 没有想到&#xff0c;首发定价如此“实诚”&#xff0c;加…

【Git企业开发】第五节.远程操作

文章目录 前言一、理解分布式版本控制系统二、远程仓库 2.1 新建远程仓库 2.2 克隆远程仓库 2.3 向远程仓库推送 2.4 拉取远程仓库总结 前言 一、理解分布式版本控制系统 我们目前所说的所有内容(工作区&#xff0c;暂存区&#xff0c;版本库等等)&#x…

Django-vue-admin 滚动监听,锚点定位目录

就是实现滑动内容&#xff0c;目录也跟着滚动&#xff0c;同时点击目录&#xff0c;内容会滑动到指定位置 试过很多&#xff0c;反正都不适用Django-vue-admin框架&#xff0c;唯有这个功能可以&#xff0c;只是样式按照自己想要的改改就行&#xff0c; https://blog.csdn.ne…

如何让企业配件管理高效又智能!仓库配件出入库管理系统哪家的好用?

在当今快速发展的商业环境中&#xff0c;企业运营的效率和管理的重要性日益凸显。对于许多企业来说&#xff0c;仓库配件管理是一个关键的环节&#xff0c;它不仅涉及到物品的存储和分发&#xff0c;还与企业的成本控制和运营流程紧密相关。然而&#xff0c;管理仓库配件是一项…

NEFU数字图像处理(3)图像分割

一、图像分割的基本概念 1.1专有名词 前景和背景 在图像分割中&#xff0c;我们通常需要将图像分为前景和背景两个部分。前景是指图像中我们感兴趣、要分割出来的部分&#xff0c;背景是指和前景不相关的部分。例如&#xff0c;对于一张人物照片&#xff0c;人物就是前景&…

R语言在生态环境领域中的实践技术应用

R语言作为新兴的统计软件&#xff0c;以开源、自由、免费等特点风靡全球。生态环境领域研究内容广泛&#xff0c;数据常多样而复杂。利用R语言进行多元统计分析&#xff0c;从复杂的现象中发现规律、探索机制正是R的优势。为此&#xff0c;以鱼类、昆虫、水文、地形等多样化的生…

Git 标签(Tag)实战:打标签和删除标签的步骤指南

目录 前言使用 Git 打本地和远程标签&#xff08;Tag&#xff09;删除本地和远程 Git 标签&#xff08;Tag&#xff09;开源项目标签&#xff08;Tag&#xff09;实战打标签删除标签 结语开源微服务商城项目前后端分离项目 前言 在开源项目中&#xff0c;版本控制是至关重要的…

【免费活动】11月4日敏捷武林上海站 | Scrum.org CEO 亲临现场

活动介绍 过去的几年里&#xff0c;外界的风云变幻为我们的生活增添了一些不一样的色彩。在VUCA世界的浪潮里&#xff0c;每一个人都成为自己生活里的冒险家。面对每一次的变化&#xff0c;勇于探索未知&#xff0c;迎接挑战&#xff0c;努力追逐更好的自己。 七月&#xff0…

同城售后系统退款业务重构心得 | 京东云技术团队

一、重构背景 1.1、退款 到家、小时购、天选退款有2套结构&#xff0c;代码逻辑混乱&#xff1b; 其中小时购、天选部分售后单是和平生pop交互退款&#xff0c;部分是和售后中台交互退款&#xff1b;并且兼容3套逻辑&#xff1b; 痛点&#xff1a;代码繁重&#xff0c;缺乏…

素材收藏必备!免费获取这5个矢量图标库,设计更得心应手!

可以自由拉伸的矢量图标&#xff0c;在平面设计流程中的重要性&#xff0c;有过设计经验的用户一定不会陌生。 下面&#xff0c;我们给大家准备了5个免费使用的矢量logo图标库&#xff0c;建议大家一键收藏。 1&#xff1a;即时设计 即时设计的资源社区内有海量免费的矢量图…

PostgreSQL 数据库日志相关参数

PostgreSQL数据库的配置主要是通过修改数据目录下的 postgresql.conf和pg_hba.conf文件来实现的。 如果想从其他机器上登录该数据 库&#xff0c;需要把监听地址改成实际网络的地址&#xff0c;一种简单的方法是把地址 改成“*”&#xff0c;表示在本地的所有地址上监听&#…

新手学计算机编程入门,自学编程入门从哪里入手开始学习

新手学计算机编程入门&#xff0c;自学编程入门从哪里入手开始学习 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&#xff0c;向如图这个…

AndroidPicker的使用

项目地址&#xff1a;https://github.com/gzu-liyujiang/AndroidPicker 历史版本:https://github.com/gzu-liyujiang/AndroidPicker/blob/master/ChangeLog.md 依赖配置 // JitPack 远程仓库&#xff1a;https://jitpack.iomaven { url https://jitpack.io } 所有选择器的基…