zoukankan      html  css  js  c++  java
  • 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期

    原来的代码如下:

    <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>
  • 相关阅读:
    【结对开发】电梯调度 一(从电梯布局分配考虑)需求分析及设计思路。
    【结对开发】求一个整数数组的所有子数组中和的最大值。
    【测试用例选取及异常处理】 之 求一个数组中的最大整数。
    互测测评报告
    绩效考核
    冲刺5
    写个烂android一天到晚活累死,
    冲刺3
    冲刺2
    冲刺1
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14166927.html
Copyright © 2011-2022 走看看