微信小程序優化：實現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>