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

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

文章目录

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

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

html 复制代码
<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。
html 复制代码
<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>
js 复制代码
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. 在优化一下自定义的日期组件的样式
css 复制代码
.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 组件样式一样。

相关推荐
牧杉-惊蛰11 分钟前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
zandy10112 小时前
衡石科技chatbot分析手册--钉钉数据问答机器人配置
科技·机器人·钉钉·chatbot·衡石科技
JAVA拾贝3 小时前
Prometheus+Grafana运维监控并实现钉钉告警
运维·钉钉·grafana·prometheus·运维监控
拼图2095 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6686 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通6 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~7 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot7 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟7 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45807 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序