微信小程序优化：实现picker组件中input输入框禁止输入，而只能通过picker组件选择日期
2024-10-19 11:48:05
原来的代码如下：
<view class="right">
<picker mode="date" value="{{material.arriveToDate}}" bindchange="changeDate2">
<input placeholder="请输入预计到货时间" name="arriveToDate" value="{{material.arriveToDate}}"/>
</picker>
</view>
由于对input输入框没有禁用，导致你仍然可以输入内容，效果如下：
代码优化，在input输入框中加入disabled属性：
<view class="right">
<picker mode="date" value="{{material.arriveToDate}}" bindchange="changeDate2">
<input placeholder="请输入预计到货时间" name="arriveToDate" value="{{material.arriveToDate}}" disabled/>
</picker>
</view>
加入disabled属性之后，由于输入框禁用，所以无法输入，而只能选择日期。
注意：不是所有的picker组件都要加入disabled组件，因为搜索框中选择后的日期还需要清空，如果加了disabled属性，选择了日期之后就无法清空，而是只能修改日期。
如果是修改日期，则要加disabled属性。
如果要实现picker组件中input输入框禁用与picker组件禁用，则需要在picker标签和input标签中都加disabled属性，
示例代码如下：
<view class="right">
<picker mode="date" disabled value="{{material.arriveToDate}}" bindchange="changeDate1">
<input placeholder="预计到货日期" name="arriveToDate" value="{{material.arriveToDate}}" disabled/>
</picker>
</view>
最新文章
- 最好的.NET开源免费ZIP库DotNetZip（.NET组件介绍之三）
- COGS461. [网络流24题] 餐巾
- 洛谷P1288 取数游戏II
- Scrum Meeting 4-20151204
- HDU 5883 The Best Path
- 南阳理工ACM-OJ 分数加减法 最大公约数的使用
- MySQL删除表方式差异
- 7.21.01 if语句
- Re.FFT
- unigui+fastReport实现web打印方案
- Java反射和注解
- httpd安装与配置(编译安装)
- [luogu2657][windy数]
- 《剑指offer》总结一
- Spring基础(6) ： 普通Bean对象中保存ApplicationContext
- iOS 七牛多张图片上传
- (转)windows 2003 远程桌面关闭 运行程序退出解决
- java课程设计-坦克大战
- PHP实现HTML页面静态化
- ACM -- 算法小结（二）错排公式的应用