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

最新推荐文章于 2025-07-14 16:51:55 发布

Q_Q 忙里偷闲

最新推荐文章于 2025-07-14 16:51:55 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app 钉钉小程序日期组件兼容问题

本文链接：https://blog.csdn.net/qq_36410795/article/details/134188419

本文讲述了开发者在使用uni-app开发钉钉小程序时遇到uni-datetime-picker在iOS设备上无法正常工作的困扰，随后介绍了通过使用dd.datePicker组件以及自定义日期选择器实现兼容的方法，确保在iOS上正常显示和功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

文章目录

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` 实现。

就是自定义一个 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;
				}
			},
		});
	},
}

在优化一下自定义的日期组件的样式

.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;
}