原来的代码如下:


<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>

微信小程序优化:实现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. Native vlan

    1.本征 VLAN即Native Vlan Native Vlan和其他Vlan的另外一个区别在于:非Native Vlan在trunk中传输数据时要被添加Vlan标记的(如dot1q或者isl),但 ...

  2. 【Android初级】如何实现一个比相册更高大上的左右滑动特效(附源码)

    在Android里面,想要实现一个类似相册的左右滑动效果,我们除了可以用Gallery.HorizontalScrollView.ViewPager等控件,还可以用一个叫做 ViewFlipper 的 ...

  3. <<Hive编程指南>>读书笔记

    1. 设置hive以本地模式运行(即使当前用户是在分布式模式或伪分布式模式下执行也使用这种模式) set hive.exec.model.local.auto=true; 若想默认使用这个配置,可以将 ...

  4. [POJ1985] Cow Marathon 「树的直径」

    >传送门< 题意:求树的直径 思路:就是道模板题,两遍dfs就求出来了 Code #include <cstdio> #include <iostream> #in ...

  5. Educational Codeforces Round 21

    Educational Codeforces Round 21  A. Lucky Year 个位数直接输出\(1\) 否则,假设\(n\)十进制最高位的值为\(s\),答案就是\(s-(n\mod ...

  6. Array Transformer UVA - 12003

    题目:传送门 题意: 给你n个数,要进行m次操作 对于每次操作(l,r,v,p)代表:在区间[l,r]中有x(这个x是需要你自己找出来的)个数小于v,你需要把序列的第p个位置的值改成u∗k/(r−l ...

  7. 流媒体传输协议之 RTP(下篇)

    本系列文章将整理各个流媒体传输协议,包括 RTP/RTCP,RTMP,希望通过深入梳理协议的设计细节,能够给流媒体领域的开发者带来一定的启发. 作者:逸殊 审核:泰一 接上篇:< 流媒体传输协议 ...

  8. C++ 指针 new delete int*与string

    一 指针 string和int 都可以认为是四个字节sizeof(string)==4, string是个类,它的空间在堆动态分配 二.delete 只是释放空间 三.new 数组 int size= ...

  9. 微软大楼设计方案(中等) 推公式+RMQ问题

    近日,微软新大楼的设计方案正在广泛征集中,其中一种方案格外引人注目.在这个方案中,大楼由 nn 栋楼组成,这些楼从左至右连成一排,编号依次为 11 到 nn,其中第 ii 栋楼有 h_ih​i​​层. ...

  10. HDU 3341 Lost's revenge (AC自动机 + DP + 变进制/hash)题解

    题意:给你些分数串,给你一个主串,主串每出现一个分数串加一分,要你重新排列主串,最多几分 思路:显然这里开$40^4$去状压内存不够.但是我们自己想想会发现根本不用开那么大,因为很多状态是废状压,不是 ...