uniapp picker+input日期选择器 禁止弹出软键盘兼容问题

1. 官网给的picker 日期选择示例

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="uni-input">{{date}}</view>
		</picker>
	</view>
</view>

2. 在picker里面使用input

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<input :value="dateValue" placeholder="年-月-日" />
		</picker>
	</view>
</view>

结果:弹出日期选择器的同时弹出输入框且可改值。

3. 使用disable禁用输入框

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<input :value="dateValue" disabled placeholder="年-月-日" />
		</picker>
	</view>
</view>

结果:有些设备(如小米、网页调试)无法弹出日期选择器。
原因:input被禁用无法点击。

4. 使用定位盒子覆盖input框,添加可点击条件

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view style="position: relative;">
					<input :value="dateValue" disabled placeholder="年-月-日" />
					<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;"> </view>
				</view>
		</picker>
	</view>
</view>

结果:符合需求。

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值