原来的代码如下:


<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. checkAll操作

    //全部勾选 function checkAll(obj) { var cols = document.getElementsByName('cols'); for ( var i = 0; null ...

  2. CCF-I'm stuck!(BFS)

    I'm stuck!   问题描述 给定一个R行C列的地图,地图的每一个方格可能是'#', '+', '-', '|', '.', 'S', 'T'七个字符中的一个,分别表示如下意思: '#': 任何 ...

  3. xss原理及简单介绍

    XSS简单介绍-Web攻击 一 ·基础介绍 xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删 ...

  4. Flink-v1.12官方网站翻译-P014-Flink Architecture

    Flink架构 Flink是一个分布式系统,为了执行流式应用,需要对计算资源进行有效的分配和管理.它集成了所有常见的集群资源管理器,如Hadoop YARN.Apache Mesos和Kubernet ...

  5. AYIT-2020 609暑假集训第一周周赛题 A - A计划

    可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主的肉也能长生不老.年迈的国王正是心急如焚,告招天下 ...

  6. Codeforces Round #640 (Div. 4)

    比赛链接:https://codeforces.com/contest/1352 A - Sum of Round Numbers 题意 将一个十进制数的每一个非零位分离出来. 代码 #include ...

  7. Codeforces Round #Pi (Div. 2) D. One-Dimensional Battle Ships

    Alice and Bob love playing one-dimensional battle ships. They play on the field in the form of a lin ...

  8. LEETCODE - 1181【前后拼接】

    class Solution { public: string gethead(string str){//获取头单词 string ret = ""; int strlen = ...

  9. Codeforces13C–Sequence (区间DP)

    题目大意 给定一个含有N个数的序列,要求你对一些数减掉或者加上某个值,使得序列变为非递减的,问你加减的值的总和最少是多少? 题解 一个很显然的结果就是,变化后的每一个值肯定是等于原来序列的某个值,因为 ...

  10. HDU 4511 小明系列故事——女友的考验 (AC自动机 + DP)题解

    题意:从 1 走到 n,要求所走路径不能出现给定的路径,求最短路 思路:因为要求不能出现给定路径,那么我可以求助ac自动机完成判断. 我们可以在build的时候标记哪些路径不能出现,显然下面这种表示后 ...