原来的代码如下:

  1.  
  2. <view class="right">
  3.     <picker mode="date" value="{{material.arriveToDate}}" bindchange="changeDate2">
  4.         <input placeholder="请输入预计到货时间" name="arriveToDate" value="{{material.arriveToDate}}"/>
  5.     </picker>
  6. </view>

由于对input输入框没有禁用,导致你仍然可以输入内容,效果如下:

代码优化,在input输入框中加入disabled属性:

  1. <view class="right">
  2. <picker mode="date" value="{{material.arriveToDate}}" bindchange="changeDate2">
  3. <input placeholder="请输入预计到货时间" name="arriveToDate" value="{{material.arriveToDate}}" disabled/>
  4. </picker>
  5. </view>

加入disabled属性之后,由于输入框禁用,所以无法输入,而只能选择日期。

注意:不是所有的picker组件都要加入disabled组件,因为搜索框中选择后的日期还需要清空,如果加了disabled属性,选择了日期之后就无法清空,而是只能修改日期。

如果是修改日期,则要加disabled属性。

如果要实现picker组件中input输入框禁用与picker组件禁用,则需要在picker标签和input标签中都加disabled属性,

示例代码如下:

  1. <view class="right">
  2. <picker mode="date" disabled value="{{material.arriveToDate}}" bindchange="changeDate1">
  3. <input placeholder="预计到货日期" name="arriveToDate" value="{{material.arriveToDate}}" disabled/>
  4. </picker>
  5. </view>

微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期的更多相关文章

  1. 微信小程序的坑(持续更新中)

    参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的 ...

  2. uni微信小程序优化,几行代码就能省100kb的主包空间?

    不是标题党,我们公司的项目确确实实是省下了100kb的主包空间,而且还是在没有牺牲任何的性能和业务的前提下实现的. 但是100kb是根据项目大小,所以你用这个插件可能省下超过100kb或者更少. 直接 ...

  3. 微信小程序------MD5加密(支持中文和不支持中文)和网络请求(get和post)

    开发中常常遇到MD5加密,最近做小程序也用到了,简单总结了一下: 这要有两个加密文件,一个不支持中文,一个支持,所以你选择支持的来用就行了: 也随便说说小程序的get和post网络请求. 来看看效果图 ...

  4. 微信小程序练习笔记(更新中。。。)

    微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作  test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部 ...

  5. uni微信小程序优化,打包后的import vue路径是可删除的

    这次的优化我公司项目主包只减小了32kb,但是减小的不仅仅是主包,所有分包均在没有改动任何业务代码的情况下完成了压缩空间的优化. 主包分包压缩空间的优化都要视项目而定,32kb只是我公司的小程序项目. ...

  6. 微信小程序优化

    setData setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口.在介绍常见的错误用法前,先简单介绍一下 setData 背后的工作原理. 工作原理 小程序的视图层目前使用 ...

  7. uni微信小程序优化,多个分包在用的公共代码该放在哪?

    公共的代码包括公用的vue组件和js代码,从维护性的角度来说应该放到主包才对, 但是主包有大小限制,如果把2个分包都在用的代码放到主包里面那2M很快就满了. 所以该放在哪?我的方案是从维护的角度放在主 ...

  8. 微信小程序之页面引用utils中的js文件

    /* 只可使用相对路径 */const utils = require('../../../utils/util.js') Page({})

  9. 微信小程序 setData动态设置数组中的数据

    setdata传递动态数据值必须为对象(只能是key:value) 语法如下 this.setData({ filter: 1212 }) 如果setdata要传递数组呢? 首先相到的是 this.s ...

随机推荐

  1. MySQL数据库的逻辑架构和存储引擎

    和其他数据库相比,MySQL数据库的架构与众不同,它的架构可以在多种不同的场景中应用并发挥良好的作用:主要体现在存储引擎上的架构上,插件式的存储引擎架构将查询处理和其他的系统任务以及数据存储提取相分离 ...

  2. nginx教程<一>

    2020最新Nginx教程全面讲解教程,感觉讲的很不错但是需要有docker基础,因为是基于docker快速搭建的nginx. 1.为什么要学习Nginx 肯定是工作和业务需求催生的学习需要哈哈,不过 ...

  3. 前端html基础学习笔记二

    表单 1 : 表单标签 <form></form> 属性 : action = '接口地址' method = 'get / post' name = '表单名称' 2 : 表 ...

  4. 【奇淫巧技】Bypass阿里云注入

    序言 我:摸鱼一时爽,一直摸鱼一时爽啊:relieved:大佬:还摸鱼,快来搞个注入.我:... 拿到数据包 GET /wxapp.php?i=undefined&t=undefined&am ...

  5. JVM之JVM体系结构

    JVM是运行在操作系统之上的,它与硬件没有直接的交互 下图运行时数据区灰色代表线程私有,亮色(方法区和堆)代表所有线程共享. 1.类装载器ClassLoader 负责加载class文件,class文件 ...

  6. ACwing 258. 石头剪子布

    258. 石头剪子布 题目传送门 题意挺好理解,但是当我看样例的时候就傻了.不是说好的只有一个裁判的吗?出现矛盾的时候该怎么判定裁判? 分析 观察这个数据量就会发觉是有猫腻的,直接从正面求出裁判并不是 ...

  7. N皇后解法以及位运算优化

    N皇后解法以及位运算优化 观察棋盘,要求皇后之间不能处在同行同列同一条斜线,求使得每行都有一个皇后的放置方法共有多少种. 每尝试放置一个皇后,都可以把该位置所在的行.列标号用一个数组标记,含义表示该行 ...

  8. hdu1517 A Multiplication Game

    Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  9. Codeforces Round #570 (Div. 3) E. Subsequences (easy version) (搜索,STL)

    题意:有一长度为\(n\)的字符串,要求得到\(k\)不同的它的子序列(可以是空串),每个子序列有\(|n|-|t|\)的贡献,求合法情况下的最小贡献. 题解:直接撸个爆搜找出所有子序列然后放到set ...

  10. - 迷宫问题 POJ - 3984 bfs记录路径并输出最短路径

    定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, ...