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>
结果:符合需求。